具有一个宽度固定列的 Bootstrap 4 布局答案

【问题标题】：Bootstrap 4 layout with one width fixed column具有一个宽度固定列的 Bootstrap 4 布局
【发布时间】：2020-10-13 23:09:38
【问题描述】：

这是我的 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>

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

<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 project 中查看。

【讨论】：

不，事实上。我刚刚取出了列，并将div 标签变成了弹性项目。看看it now。

【解决方案3】：

Bootstrap 4 已将其内置到其布局组件中。

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

参考：https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

如果您希望设置宽度列具有固定的像素宽度，可以省略 .col-4 并添加自定义像素宽度类。

<div class="container">
  <div class="row">
    <div class="col-pixel-width-100">
      <!-- Set Width Column -->
    </div>
    <div class="col">
      <!-- Variable Width Column -->
    </div>
  </div>
</div>

// style.css
.col-pixel-width-100 { flex: 0 0 100px; }

【讨论】：

【解决方案4】：

这些答案都没有解决我面临的问题。我想出了这样一个解决方案：（虽然没有效果，但确实有效。）

.my-fixed-col{
  width: 150px;
}

.my-fluid-col{
  width: calc(100% - 150px);
}

/***/
*{
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="container-fluid d-flex p-0 m-0">
  <div class="row p-0 m-0 w-100">
    
    <div class="my-fixed-col bg-primary text-white p-1">
        150px fixed column
    </div>
    
    <div class="my-fluid-col bg-danger text-white p-1">
        fluid column
    </div>
  
  </div>
</div>

【讨论】：