错位的引导列

Question

我遇到了一些（引导）coulmn的问题，最终错过了，我无法弄清楚原因。所以，如果有人可以向我解释为什么会发生这种情况，如何解决这个问题，我会很高兴。

预览：http://www.bootply.com/6n2FO36f6i

正如您所见，＆＃34;位置＆＃34;列是右边的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;
}

如上所述，我想知道为什么会发生这种情况（我的代码中的内容正在发生这种情况）。所以我可以从错误中吸取教训。还有如何解决这个问题。

感谢。

Answer 1

问题归因于仅在flex到row中使用的equal-height样式，请记住float，clear和vertical-align对flex项和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/

Answer 2

这是因为第一行获得了CSS：

display:flex
flex: 1 0 auto

解决方案：

将上面的CSS添加到第二行元素。

或者

将“equal-height”类添加到第二行，如：

<div class="row equal-height">

此外，您需要将以下CSS添加到“maps-style”类

width:100%