layout - 如何在 Bootstrap 中仅制作一列流体

Question

以下是我在 Bootstrap 3.2 中的布局结构:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
        <div class="col-xs-6">
            <!-- I want only this column to be fluid. -->
        </div>
        <div class="col-xs-3">
            <!-- I want this column to be fixed. -->
        </div>
    </div>
</div>

正如您在伪代码注释中看到的那样，我只希望中间的列根据屏幕尺寸保持流动。

Bootstrap 的container-fluid 方式是否可行？或者我应该通过其他方式？

Answer 1

没有“引导方式”可以使列具有固定宽度。因此，我们可以通过几种方式使用 CSS 来完成您想要的事情

1. 使用 Flexbox(最好的方法)- Demo 。

.row {
  display: flex;
}
.fixed-side-column {
  width: 250px;
}
.fluid-middle-column {
  flex-grow: 1;
}

使用 calc() (或 JavaScript 等效项)，记住 browser support -Demo

.row > div {
  float:left; /* Could also use display: inline-block. */
}
.fixed-side-column {
  width:250px;
}
.fluid-middle-column {
  width:calc(100% - 500px);
}

在中间元素上使用绝对定位和填充来消除任何计算的需要 - Demo

您必须更改一些标记

<div class="container-fluid">
 <div class="row">
    <div class="fluid-middle-column">
      <!-- I want only this column to be fluid. -->
    </div>
    <div class="fixed-side-column">
      <!-- I want this column to be fixed. -->
    </div>    
    <div class="fixed-side-column right">
      <!-- I want this column to be fixed. -->
    </div>
  </div>
</div>

/* CSS */
.fixed-side-column {
  width:250px;
  float:left;
}
.right {
  float:right;
}
.fluid-middle-column {
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  padding: 0 250px 0 250px;
}

您需要添加自定义媒体查询来处理屏幕变小时发生的情况。