Question

根据我的psd模板，我有CONTAINER，它包含5个相等宽度（344px）的列。我决定在响应性方面使用bootstrap。但现在我对这项任务感到沮丧。

有没有办法实现这个或我需要：

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

Codepen： http://codepen.io/anon/pen/YZbBQG

<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

我建议使用自动布局col-lg列以获得更大的宽度，这样您就可以跨越5个，然后缩小到md上的标准尺寸网格列，{{1}等等..

http://www.codeply.com/go/DVzExqdUZa

sm

http://www.codeply.com/go/DVzExqdUZa

Answer 2

使用引导程序很容易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 3

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


   func ==(lhs: YourType, rhs: YourType) -> Bool

Answer 4

您可以自定义您的bootstrap版本＆＃34;正确的方式＆＃34;。通过此页面的链接，您可以自定义大量设置，包括网格列数。

http://getbootstrap.com/customize/

bootstrap中的5个相等宽度的列（容器的整个宽度）

4 个答案: