Question

我使用bootstrap在一个简单的页面中工作，我遇到了一些奇怪的问题。当我的列只有元素高度（未在任何地方定义）时，网格断开，但当我将其定义到某个高度时，网格工作得很好。有人能解释我为什么？

以下是页面的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>

Bootstrap网格对齐中断

1 个答案: