Question

这里的

列超过了bootstrap中允许的最大限制12，但它确实有效。怎么样？

<div row="container">
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
<div class="col-md-4 col-sm-6 portfolio-item">...</div>
</div>

Answer 1

每当arow在bootstrap中超过12列时，其余列将移动到下一行，就好像正在创建下一行一样。

但是根据bootstrap文档，您应该始终将列包装在一行中。所以这是一个不好的做法。

查看示例中的效果

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div row="container">
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:blue;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:black;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:green;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:brown;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:grey;">...</div>
<div class="col-md-4 col-sm-6 portfolio-item" style="background-color:yellow;">...</div>
</div>

<br><br>
<div class="col-md-12 col-xs-8 portfolio-item" style="background-color:blue;">...</div>
<div class="col-md-12 col-xs-4 portfolio-item" style="background-color:black;">...</div>
<div class="col-md-12 col-xs-8 portfolio-item" style="background-color:green;">...</div>
<div class="col-md-4 col-xs-8 portfolio-item" style="background-color:brown;">...</div>
<div class="col-md-4 col-xs-5 portfolio-item" style="background-color:grey;">...</div>
<div class="col-md-4 col-xs-4 portfolio-item" style="background-color:yellow;">...</div>
</div>

为什么有人会将bootstrap的网格限制延长到12？

1 个答案: