Bootstrap 网格对齐中断

Question

我正在使用引导程序在一个简单的页面上工作，但遇到了一些奇怪的问题。 当我的列只有元素高度（未在任何地方定义）时，网格就坏了，但是当我将它定义到某个高度时，网格工作得很好。 谁能解释一下为什么？

这是页面的HTML和CSS（不完整，如果需要完整代码请告诉我）

        <div class="row item afterline">
            <h2>Educação:</h2>
            <div class="col-xs-12 col-md-4">
                <div class="item-element-separator">
                    <h3>Escola Politécnica da USP</h3>
                    <h4>2014 - 2019</h4>
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                <div class="item-element-separator">
                    <p>Graduação em Engenharia Elétrica.</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-4">
                <div class="">
                    <h3>Institution</h3>
                    <h4>Period init - End</h4>
                </div>
            </div>
            <div class="col-xs-12 col-md-8">
                <div class="">
                    <p>Mussum Ipsum, cacilds vidis litro abertis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Manduma pindureta quium dia nois paga. Detraxit consequat et quo num tendi nada. Copo furadis é disculpa de bebadis, arcu quam euismod magna.</p>
                </div>
            </div>
        </div>

css

.no-break-bot{
    margin-bottom: 0px;
}
.no-break-top{
    margin-top: 0px;
}
.item h2{
    margin-bottom: 20px;
}
.item h3{
    margin-top: 0px;
}
.item-element-separator{
    padding-bottom: 10px;
}

Answer 1

每行包含 12 列，因此您需要修复该行，请参阅 html 部分第 1 行开始结束的注释部分

.no-break-bot{
margin-bottom: 0px;
}
.no-break-top{
    margin-top: 0px;
}
.item h2{
    margin-bottom: 20px;
}
.item h3{
    margin-top: 0px;
}
.item-element-separator{
    padding-bottom: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container main-wraper">
  <div class="row item afterline"><!--row 1 start-->
    <h2>Educação:</h2>
    <div class="col-xs-12 col-md-4">
      <div class="item-element-separator">
        <h3>Escola Politécnica da USP</h3>
        <h4>2014 - 2019</h4>
      </div>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="item-element-separator">
        <p>Graduação em Engenharia Elétrica.</p>
      </div>
    </div> </div><!--row 1 End-->
	  <div class="row item afterline"><!--row 2 start-->
    <div class="col-xs-12 col-md-4">
      <div class="">
        <h3>Institution</h3>
        <h4>Period init - End</h4>
      </div>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="">
        <p>Mussum Ipsum, cacilds vidis litro abertis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Manduma pindureta quium dia nois paga. Detraxit consequat et quo num tendi nada. Copo furadis é disculpa de bebadis, arcu quam euismod magna.</p>
      </div>
    </div></div><!--row 2 start-->
 
</div>