bootstrap 中的 5 个等宽列（容器的全宽）

Question

根据我的 psd 模板，我有 CONTAINER，它由 5 个等宽 (344px) 的列组成。在响应能力方面，我决定使用 bootstrap。但现在我对这项任务感到沮丧。

有什么方法可以实现这个或者我需要：

重建我的 psd 模板以适应 bootstrap 网格和尺寸
不使用 bootstrap 并编写自定义响应类

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>

Answer 1

使用 bootstrap 4 很容易。您只需要在列上添加一行 flex 来定义自定义宽度。

.row > .col {
  flex: 0 0 344px;
  background: #eee;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
  </div>
</div>

Answer 2

你也可以使用 Flexbox。我建议您使用 1200px 或更小作为最大容器宽度。

<div class="container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</div>

.container{

    display: flex;
    width: 1720px;

}

Answer 3

我建议使用自动布局 col-lg 列以获得更大的宽度，这样您就可以有 5 个横跨，然后缩小到 md、[=14= 上的标准尺寸网格列], 等..

Bootstrap 4.6（2020 年更新）

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 d-none d-lg-block">
           <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

注意：这将使列均匀增长以填充行的宽度。在列内容强制宽度的极少数情况下（例如包含固定宽度图像或非环绕文本的列），请使用 min-width:0 强制列宽相等，而不管其内容如何。

.col-lg {
    min-width: 0;
}

http://codeply.com/go/DVzExqdUZa

Answer 4

您可以自定义 bootstrap "the right way" 的版本。此页面的 link 让您可以自定义很多设置，包括网格列数。

http://getbootstrap.com/customize/

bootstrap 中的 5 个等宽列（容器的全宽）

5 equal width columns in bootstrap (full width of container)

css

flexbox

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4