在引导程序中计算宽度和填充答案

【问题标题】：Calculate width and padding in bootstrap在引导程序中计算宽度和填充
【发布时间】：2019-12-18 14:13:19
【问题描述】：

我正在尝试弄清楚如何在引导程序“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>

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

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

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

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

I also made a codepen to give a better picture

【问题讨论】：

嗯，我不认为这是真的可能。您的填充必须是一个固定值（因为它不能是一个百分比），所以它不会在宽度发生变化时立即排列。
另外，您的 Codepen 的结构与您上面的代码不同。

标签： css twitter-bootstrap-3

【解决方案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;
}

希望这会有所帮助。

【讨论】：