Пропущенный столбец бутстрапа

Question

У меня есть некоторые проблемы с (bootstrap) coulmn, который заканчивается отсутствующим местом, и я не могу понять, почему. Так что, если кто-то может объяснить мне, ПОЧЕМУ, что это случилось, и КАК это решить, я был бы замечательным.

Preview: 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; 
} 

И, как описано выше, я хотел бы знать, почему это происходит (то, что в моем коде делают это бывает). Поэтому я могу учиться на своих ошибках. А также КАК решить эту проблему.

Спасибо.

Answer 1

Проблема заключается в том, что стиль flex используется только в первых row до equal-height, что float, clear и vertical-align не влияют на столбцы гибкого элемента и бутстрапа, имеют 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 для второго элементов строки.

Или

Добавить "равных по высоте" класс второго ряда, как:

<div class="row equal-height"> 

Кроме того, вам нужно добавить следующий CSS к классу "карт-стиле"

width:100%