错位 bootstrap 列
Missplaced bootstrap column
我在使用 (bootstrap) 库时遇到了一些问题，最终放错了位置，我不明白为什么。因此，如果有人可以向我解释为什么会发生这种情况以及如何解决这个问题，我会很高兴。
预览：http://www.bootply.com/6n2FO36f6i
如您所见，"Location" 列向右偏了 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;
}
并且如上所述，我想知道为什么会发生这种情况（我的代码中是什么导致这种情况发生）。所以我可以从我的错误中吸取教训。以及如何解决这个问题。
谢谢。
因为第一行是 CSS:
display:flex
flex: 1 0 auto
解决方案：
将以上 CSS 添加到第二行元素。
或者
将 "equal-height" class 添加到第二行，例如：
<div class="row equal-height">
此外，您需要添加以下 CSS 到 class "maps-style"
width:100%
问题是由于 flex 样式仅在第一个 row 到 equal-height 中使用，请记住 float、clear 和 vertical-align 对弹性项目没有影响，bootstrap 列有 float: left。
所以要修复它，请将 equal-height 添加到第二个 row 并将 flex-grow 添加到 .maps-style，如下所示：
<div class="row equal-height">
.maps-style{
flex-grow: 1; /*or width 100%*/
}
这是一个有效的 jsfiddle 示例：http://jsfiddle.net/Yandy_Viera/nc2rm6ko/
我在使用 (bootstrap) 库时遇到了一些问题，最终放错了位置，我不明白为什么。因此，如果有人可以向我解释为什么会发生这种情况以及如何解决这个问题，我会很高兴。
预览：http://www.bootply.com/6n2FO36f6i
如您所见，"Location" 列向右偏了 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;
}
并且如上所述，我想知道为什么会发生这种情况（我的代码中是什么导致这种情况发生）。所以我可以从我的错误中吸取教训。以及如何解决这个问题。
谢谢。
因为第一行是 CSS:
display:flex
flex: 1 0 auto
解决方案：
将以上 CSS 添加到第二行元素。
或者
将 "equal-height" class 添加到第二行，例如：
<div class="row equal-height">
此外，您需要添加以下 CSS 到 class "maps-style"
width:100%
问题是由于 flex 样式仅在第一个 row 到 equal-height 中使用，请记住 float、clear 和 vertical-align 对弹性项目没有影响，bootstrap 列有 float: left。
所以要修复它，请将 equal-height 添加到第二个 row 并将 flex-grow 添加到 .maps-style，如下所示：
<div class="row equal-height">
.maps-style{
flex-grow: 1; /*or width 100%*/
}
这是一个有效的 jsfiddle 示例：http://jsfiddle.net/Yandy_Viera/nc2rm6ko/