Bootstrap 4布局，一列宽度固定

Question

这是我的 html 代码：

 <div class="container-fluid d-flex h-100">
  <div class="white h-100" style="background-color: white;">
    fixed 100px
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
  <div class="col-6 red h-100" style="background-color: red;">
    6
  </div>
  <div class="col-3 blue h-100" style="background-color: blue;">
    3
  </div>
</div>

你能帮我修复我的代码吗？我需要固定宽度的左侧列，它将有 100px。此列尚未调整大小。我需要的其余空间应该可以按 1 : 2 : 1 的比例动态调整。感谢您的帮助。

原文由 Denis Stephanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

@Denis Stephanov，您可以使用以下 css 规则创建一个不会收缩或增长且宽度固定的弹性项目：

 .flex-fixed-width-item {
    flex: 0 0 100px;
}

这是 flex-grow 、 flex-shrink 和 flex-basis 的缩写。您可以在这篇 CSS-Tricks 文章 中阅读有关这些属性的更多信息。

将该类添加到固定宽度列中：

 <div class="container-fluid d-flex h-100">
  <div class="white h-100 flex-fixed-width-item" style=" background-color: white;">
    fixed 100px
  </div>
  ...

然后保持你的列比率相同：

   ...
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
  <div class="col-4 red h-100" style="background-color: red;">
    4
  </div>
  <div class="col-2 blue h-100" style="background-color: blue;">
    2
  </div>
</div>

您将获得您请求的结果，您可以在此 codeply 项目 中查看。

原文由 Jade Cowan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

bootstrap 4 中有一个内置的解决方案。

试试这个;

 <div class="container">
    <div class="row">
        <div class="col-12 col-md">
            content
        </div>
        <div class="col-12 col-md-auto">
            <div style="background: red; width: 300px;">
                sidebar
            </div>
        </div>
    </div>
</div>

演示： https ://www.bootply.com/WiegnnJbxX

原文由 merkdev 发布，翻译遵循 CC BY-SA 3.0 许可协议