引导网格对齐中断

Question

I was working in a simple page using bootstrap and i've came across some weird issue. When my column had simply the element height (not defined anywhere) the grid broke, but when i defined it to some height the grid worked just fine. Someone could explain me why?

Here are the HTML and CSS of the page (not complete, if needed to be the full code please let me know)

        <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

Each row contain 12 column so you need to fix the row, See the comment out part on html section row 1 start end

 .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>