引导网格对齐中断

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>