Question

直到最近，我从未遇到过bootstrap网格的问题。我遇到的问题是中断点。在xs我有2列，在小我有3列，在中型我想要4列，但这是打破，在大，我有6列。我最终得到一行4，然后是一行2，依此类推。

xs：6 * 6 = 36
sm：4 * 6 = 24
md：3 * 6 = 18＆lt; -18显然是导致问题的原因
lg：2 * 6 = 12

出于某种原因，我无法想到解决这个问题的方法。可以在http://dev.charliegrove.com/kingdom

看到该示例

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>

任何建议都非常感谢，因为我总是使用bootstrap，并且必须有一些我在这里缺少的东西才能完成这个!!谢谢

Answer 1

我展示了你的演示代码，你有这样的代码：

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>

现在问题是，在每个<div class="row"></div>你有6个其他div，你重复了这种格式。因此，当子行设置在行中时，它会分解为下一行<div class="row"></div>的新行。因此，在col-md-3类中，它将在4和2的集合中分解。

要避免此问题，您可以在单个<div class="row"></div>中设置所有子div，如下所示：

<div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 home-tile-holder"> </div>
</div>

Answer 2

我看到两个简单的选项...要么跳过md-3列（即直接从sm-4到lg-2），要么像@tejashoni建议的那样，将所有正方形放在一个div class="row"中

具有6列的Bootstrap网格在4列处中断

2 个答案: