css - 在 Bootstrap 中计算宽度和填充

Question

我正在尝试弄清楚如何在 Bootstrap “container-fluid”中的自定义 div 中动态计算宽度和 padding-left。

设置如下所示:

<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>

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

我知道我需要对 padding-left 和 width 使用某种 calc()，但我无法解决这个问题。

非常欢迎任何帮助或建议!

免责声明，这是一个旧元素，仍在使用 bootstrap 3，我无法更改 html 结构。

I also made a codepen to give a better picture

Answer 1

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

HTML 代码结构如下所示:

<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>

还有 CSS:

.red-blue {
  background: linear-gradient(to right, red 50%, blue 50%,blue 100%);  
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

希望这对您有所帮助。