0
我有一個（bootstrap）coulmn的問題，最終導致錯位，我找不出原因。所以如果有人能向我解釋爲什麼會發生這種情況，以及如何解決這個問題，我會很好。錯位的自舉列
前瞻：http://www.bootply.com/6n2FO36f6i
正如你所看到的「位置」欄是1px的得多的權利。
HTML：
<div class="row equal-height"> <!-- START BS ROW -->
<div class="col-md-1"> <!-- START BS COL-MD-1 -->
</div> <!-- END BS COL-MD-1 -->
<div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
<div class="singlepage-list-style"> <!-- START SINGLEPAGE-LIST-STYLE -->
<div class="list-header"> <!-- START LISTE-HEADER -->
<h1>Quick info</h1>
</div> <!-- END LIST-HEADER -->
<div class="the-list"> <!-- START THE-LISTE -->
<ul>
<li class="check">blah<sup>2</sup></li>
<li class="check">blah</li>
<li class="check">blah</li>
<br>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="non-check">blah</li>
<li class="non-check">blah</li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="non-check">blah</li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="non-check">blah</li>
<li class="non-check">blah</li>
<li class="check">blah <p><i class="fa fa-check"></i></p></li>
<li class="non-check">blah</li>
</ul>
</div> <!-- END THE-LIST -->
</div>
</div> <!-- END BS COLD-MD-4 -->
<div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-6 -->
<div class="singleheader-content-style"> <!-- START SINGLEPAGE-CONTENT-STYLE -->
<h1>Property description</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque molestie nunc vel ultrices. Nunc lobortis libero neque, at dignissim metus vulputate id. Nam placerat cursus ex eget maximus. Maecenas finibus mauris quis erat luctus, sed tempus felis egestas. Aliquam erat volutpat. Fusce tempus turpis justo, eleifend laoreet odio vulputate eget. Sed eget tortor dui. Proin maximus elit orci, a imperdiet velit commodo at. Sed id nibh posuere, malesuada justo ac, elementum orci. Nullam id turpis eu libero lacinia egestas.
Donec in condimentum nisl, et sodales libero. Duis non enim sed est rutrum tempus. Proin sit amet elit quis libero semper faucibus. Nullam non neque velit. Donec tortor libero, euismod vel consequat at, lobortis nec tellus. Proin ac metus in leo interdum viverra a auctor nisl. Sed volutpat at risus nec laoreet. Nunc vitae pharetra diam.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dictum tincidunt enim et posuere. Vivamus congue, eros sed mollis sagittis, massa quam accumsan nibh, nec dictum ipsum urna ut ex. Cras vel scelerisque dui. Nulla aliquet ex quis quam volutpat commodo. Morbi lacinia, libero nec semper porta, lectus tellus ornare orci, quis varius velit urna et neque. Maecenas venenatis tincidunt lorem a luctus. Etiam at malesuada eros. Donec vulputate augue vel placerat dapibus. Aenean sed convallis leo. Aenean sed auctor lacus. Nam sed ultricies arcu. In a sem vel mi ullamcorper pretium. Suspendisse convallis enim eget luctus rutrum. Suspendisse potenti.
Vivamus rutrum at ex et feugiat. Aenean purus risus, vehicula at quam et, placerat rutrum augue. Pellentesque ipsum neque, vehicula ut risus vestibulum, sagittis commodo mi. Cras volutpat laoreet elit id interdum. Mauris a lorem lobortis, imperdiet mauris eu, ultricies leo. Integer sollicitudin erat lorem, a scelerisque enim viverra sit amet. Ut volutpat nisi et velit consectetur, et rutrum magna cursus. Donec justo sem, placerat sed dapibus vitae, rutrum nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Duis sollicitudin eget ipsum vel fringilla. Donec eget nisl eros. Phasellus ut lobortis diam. In magna purus, consectetur non accumsan quis, egestas imperdiet eros.
Suspendisse nec pellentesque velit. Suspendisse potenti. Mauris at iaculis lectus. In placerat vehicula tellus, luctus cursus velit bibendum quis. Nam ipsum justo, dignissim sit amet sollicitudin a, euismod in nisi. Quisque nec enim ac magna iaculis facilisis. Etiam ut tempor libero. Phasellus elit quam, lobortis at felis ut, congue consequat nulla. Aenean ultricies fringilla massa vel feugiat. Vivamus sagittis, ipsum nec cursus tempor, nulla est consequat tortor, ac imperdiet augue lacus nec mauris. Morbi a eros quis elit condimentum consequat vel quis ex. Etiam dictum sodales mauris viverra fermentum. Ut id molestie arcu. In semper ante sed finibus vestibulum. Quisque sed sodales enim, vel sagittis neque. Morbi fermentum gravida leo, non auctor ipsum tristique vel.
Vestibulum dapibus, lectus eget lacinia aliquam, mi tortor ultricies quam, in dapibus libero dui in mauris. Donec tempus sagittis augue, vitae eleifend erat pellentesque semper. Nam auctor sagittis scelerisque. Sed ut nibh.</p>
</div> <!-- END SINGLEHEADER-CONTENT-STYLE -->
</div> <!-- END BS COL-MD-6 -->
<div class="col-md-1"> <!-- START BS COL-MD-1 -->
</div> <!-- END BS COL-MD-1 -->
</div> <!-- END BS ROW -->
<div class="row"> <!-- START BS ROW -->
<div class="col-md-1"> <!-- START BS COL-MD-1 -->
</div> <!-- END BS COL-MD-1 -->
<div class="col-md-10"> <!-- START BS COL-MD-10 -->
<div class="maps-style"> <!--START MAPS-POS -->
<h1>Location</h1>
<div style="width:100%;height:350px;background-color:red;">PLACEHOLDER</div>
</div> <!-- END MAPS-POS -->
</div> <!-- END COL-MD-10 -->
<div class="col-md-1"> <!-- START BS COL-MD-1 -->
</div> <!-- END COL-MD-1 -->
</div> <!-- END BS ROW -->
CSS：
/***** INFO & CONTENT HEIGHT CONTROLER *****/
.equal-height, .equal-height > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
}
.zeropadding-right {
padding-right:0px;
}
/***** SINGLEHEADER CONTENT AREA STYLING *****/
.singleheader-content-style {
background-color:#fff;
border-right: 1px solid #9c9c9c;
padding:20px;
font-family: 'Open Sans', sans-serif;
width:100%;
}
.singleheader-content-style h1,h2,h3,h4,h5,h6 {
margin-top:0px; /* Change boostraps default */
color:#de1b1b;
}
/***** SINGLEHEADER LIST AREA STYLING *****/
.singlepage-list-style {
background-color:#fff;
border-left: 1px solid #9c9c9c;
padding:20px;
font-family: 'Open Sans', sans-serif;
width:100%;
font-size:16px;
}
.singlepage-list-style ul li {
list-style-type:none;
}
.singlepage-list-style ul {
padding-left:20px;
}
.check p {
color:#44a331;
display:inline;
}
.non-check {
opacity:0.5;
}
.the-list {
border-right: 1px solid #9c9c9c;
width:100%;
}
.list-header {
width:100%;
}
.list-header h1,h2,h3,h4,h5,h6 {
margin-top:0px; /* Change boostraps default */
color:#de1b1b;
}
/***** START MAPS STYLING *****/
.maps-style img{
width:100%;
border-top:1px solid #9c9c9c;
border-bottom:1px solid #9c9c9c;
font-family: 'Open Sans', sans-serif;
}
.maps-style {
background:#fff;
border-right:1px solid #9c9c9c;
border-left:1px solid #9c9c9c;
}
.maps-style h1 {
margin-top:0px; /* Change Boostraps default */
margin-left:20px;
color:#de1b1b;
}
而且如上所述，我想知道這是爲什麼發生的事情（是什麼在我的代碼實現這一點）。所以我可以從我的錯誤中學習。還有如何解決這個問題。
謝謝。
這是因爲'保證金左：20px'到'.maps-style h1' –
不，它不是？如果我刪除了邊距，那麼該列仍然存在錯位？ – Alex
我真的不明白「在這裏錯位」。你能在截圖中指出它嗎？ –