Question

我有很多产品，每行最多需要6个产品，所以我让每个产品col-lg-2（6 * 2 = 12个bootstrap cols），我认为它应该自动打破到下一行（从左侧开始），不是吗？

但是第二行被打破并从第四列开始。请问，它是什么原因以及如何解决？

看下面的图片可能会比我的英文模拟得更好。提前谢谢。

Answer 1

在结束行

之前使用.clearfix类

<div class="row">
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
    <div class="col-lg-2 col-sm-4 col-xs-6"></div>
       <div class="clearfix"></div> //use this before end of row
</div>

或者如果可能的话，在一行中使用不超过6个容器再拿一行并添加下一个6容器

Answer 2

你必须为这些方框提供固定的height。由于其高度可能会随text而变化，因此会出现对齐问题。

例如：

box{
 height: 300px;
}

解决此问题的一种常见且快速的方法是使用JavaScript使用等高。

https://css-tricks.com/equal-height-blocks-in-rows/

equalheight = function(container) {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function() {

        $el = $(this);
        $($el).height('auto')
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
        }
    });
}
$(window).resize(function() {   //to work in resize
    equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});

$(document).ready(function() {
 equalheight('.col-lg-2.col-md-3.col-sm-4.col-xs-6');
});

Answer 3

在Twitter引导程序（4.x下方）中，默认情况下，所有以col-（[class^="col-"]）开头的类都有float: left。填充row后，下一个项目将查找下一个可用的点以使其自身对齐到左侧。如果前一行中最高的项不是行中的最后一项，它将在其立即成功下创建一个浮点，就像在图片中一样。 1px差异足以让这种情况发生。

基本上，你想告诉应该开始新行的每个项目忽略现有的浮动。您想在

之后的每个元素上设置clear:left

大屏幕上的6个倍数（col-lg-2），
中小屏幕上3的倍数和（col-sm-4，隐含col-md-4，因为md缺失）
xs个屏幕上的2个（col-xs-6）

有效告诉 开始一个全新的行 ，

以下是上述的CSS翻译：

＆＃13;

@media (min-width: 1200px) {
  .row>.col-lg-2:nth-child(6n+1) {
    clear: left;
  }
}
@media (min-width:768px) and (max-width:1199px) {
  .row>.col-sm-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (max-width: 767px) {
  .row>.col-xs-6:nth-child(odd) {
    clear: left;
  }
}

/* you don't need the line below. it's for StackOverflow snippet only */ 
body {padding: 15px;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/214/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/173/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/200/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/187/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/185/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/135/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/231/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/191/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/201/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/185/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/154/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/179/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/235/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/185/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/142/" />
    </div>
  </div>
  <div class="col-lg-2 col-sm-4 col-xs-6">
    <div class="well">
      <img class="img-responsive" src="http://lorempixel.com/300/280/" />
    </div>
  </div>
</div>

＆＃13;

Answer 4

只需在行类后添加col-md-12 div。这对我有用

喜欢

<div class="row">
<div class="col-md-12">
------------//Your lg columns go here, please use md instead of lg if not worked
</div>
</div>

Answer 5

这是因为元素之间的高度不同，尝试使用行来打破行

<button type="button" onclick="calcNum(1)">1</button>
<button type="button" onclick="operator('+')">+</button>

 var myNumbers = [];

如何在Bootstrap .row中包裹多个不均匀的高度.col-兄弟姐妹

5 个答案: