Question

我的一位设计师编码如下，以显示响应式产品块。设计在桌面上展示3种产品，在平板电脑中展示2种产品。

此标记连续显示超过12列数。我从未在Bootstrap文档或其他来源中看到过这种结构。这有效吗？你支持这个标记吗？

<div class="row">
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    <div class="col-sm-6 col-md-4">Product</div>
    ........
    .......
    .......

Answer 1

每个包含col-md-4等列属性的div都会添加一组简单的CSS属性一些填充：（它真的很长 - 你需要向侧面滚动） https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L814

[...] .col-md-4,[ ..] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

然后，在媒体查询断点之上，应用float属性并且其宽度设定为
https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L1207

  .col-md-4 {
    float: left;
    width: 33.333333%;
  }

_{因为样式表使用box-sizing: border-box这个33.33%应用于边框 - 而不是内容框（不完全相关 - 只是副作用）。}

因为浮动元素的性质只是简单地堆叠在一起直到没有空间，然后它们就会下降到一个新的线框中，这看起来很好。
作为class="row"的父display: block;将其边距框设置为其父级内容框的全宽在这种情况下，列元素的宽度设置为父容器的1/3，因为有很多超过3，即标记说这里是一些子元素，其聚合宽度是其父元素的300％ 行元素回退到包装这是一个非常好的效果。

Answer 2

是的，此标记有效。有一个官方的Bootstrap example，使用相同的布局。

我可以编写一个包含更多列的网格，而不是在Bootstrap中将行列数大小为12吗？

2 个答案: