引導網格對齊中斷

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>