Css 在引导中计算宽度和填充

我试图弄清楚如何在引导“container fluid”中动态计算自定义div中剩余的宽度和填充

设置如下所示：

<div class="container-fluid">
  <div class="row">
<!-- Text - Slider component -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-6 text"></div>
        <div class="col-6 slider"></div>
      </div>
    </div>
<!-- Text - Slider component -->
    <div class="container">
      <div class="row">
        <div class="col-12 text-to-line-up-with">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid red-blue py-4">
  <div class="row">    
    <div class="container">
      <div class="row">
        <div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
        <div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="container">
  <div class="row">
    <div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
    <div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
  </div>
</div>

Lorem ipsum dolor sit amet，奉献精英。建筑师，托塔姆。

在文本滑块组件中，我希望col-6“文本”与文本对齐，就像它位于常规“容器”中一样

我知道我需要使用某种calc（）来计算左边的填充和宽度，但我不能把我的头放在这上面

欢迎提供任何帮助或建议

免责声明，这是一个老项目，它仍然使用Bootstrap3，我不能更改html结构

---

您不必计算宽度。只需在容器流体背景中添加线性渐变，解决方案就会简单得多

HTML代码结构如下所示：

<div class="container-fluid">
  <div class="row">
<!-- Text - Slider component -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-6 text"></div>
        <div class="col-6 slider"></div>
      </div>
    </div>
<!-- Text - Slider component -->
    <div class="container">
      <div class="row">
        <div class="col-12 text-to-line-up-with">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, totam.
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid red-blue py-4">
  <div class="row">    
    <div class="container">
      <div class="row">
        <div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
        <div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="container">
  <div class="row">
    <div class="col-6 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
    <div class="col-6 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorem, non officiis aperiam facilis dicta fugiat velit obcaecati rerum odio quo a!</div>
  </div>
</div>

---

希望这能有所帮助。

嗯，我认为这是不可能的。你的填充必须是一个固定的值（因为它不能是一个百分比），所以它不会在宽度改变时立即对齐。此外，你的代码笔的结构与上面的代码不同。