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的比例动态调整.感谢您的帮助.

Answer 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

Answer 2

@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项目中查看.

Answer 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; }