ブートストラップ4列は残りの列をブロックして完全な行を占めるようです。

Question

同じ行に2つのdivが必要です。 1つは8つの列をとり、次は4つの列を占めます。

ただし、行の残りの列が自動的にブロックされ、col-xx-xxを含むすべてのdivが完全な行を占めるようになります。ここで私が何を意味するかです：

は、どのように私は、同じ行に両方のdiv要素を持つことができますので、それは、行の残りの部分を遮断停止するのですか？

4つのcolsでdivを作成すると、その内容を削除してスペースを取ることができません。また、4つの列でdivをcol-xs-3に変換しません。

コード：

<div id="shops-section"> 
    <div id="map" #map></div> 
    <ul> 
     <li *ngFor="let shop of result?.nearbyShops"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="shop-details"> 
        <div class="col-xs-8"> 
        <h5>{{ shop.name }}</h5> 
        <h6>{{ shop.address }}</h6> 
        <button id="open-hours" type="button" class="btn btn-default">OPEN HOURS</button> 
        </div> 
        <div class="col-xs-4"> 
        <div class="icon-container"> 
         <img class="icon card-icon review-icon" src="images/sad-face.png"> 
         <h6>10</h6> 
         <img class="icon card-icon review-icon" src="images/happy-face.png"> 
         <h6>21</h6> 
        </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     </li> 
    </ul> 
</div> 

CSS：

#map { 
     height: 325px; 
     width: 100%; 
     max-width: none !important; 
     -webkit-transform: translate3d(0px, 0px, 0px); 
     -webkit-mask-image: -webkit-radial-gradient(white, black); 
     -webkit-border-top-right-radius: 10px; 
     -moz-border-top-right-radius: 10px; 
     border-top-left-radius: 10px; 
     -webkit-border-top-left-radius: 10px; 
     -moz-border-top-left-radius: 10px; 
    } 
    #map > div { 
     max-width: none !important; 
     border-top-right-radius: 10px; 
     -webkit-transform: translate3d(0px, 0px, 0px); 
     -webkit-mask-image: -webkit-radial-gradient(white, black); 
     -webkit-border-top-right-radius: 10px; 
     -moz-border-top-right-radius: 10px; 
     border-top-left-radius: 10px; 
     -webkit-border-top-left-radius: 10px; 
     -moz-border-top-left-radius: 10px; 
    } 


    .shop-details { 
     width: 100%; 
     background-color: #fff; 
     border-right: 1px solid rgba(0,0,0,.08); 
     border-left: 1px solid rgba(0,0,0,.08); 
     border-bottom: 1px solid rgba(0,0,0,.08); 
     padding:18px; 
    } 

    .shop-details h5 { 
     text-transform: uppercase; 
     color: $primary-500; 
     font-weight: 200; 
     text-transform: uppercase; 
    } 

    .shop-details h6 { 
     color: $primary-500; 
     text-transform: uppercase; 
     font-size: 12px; 
    } 

    #open-hours { 
     font-weight: 200; 
     font-size: 14px; 
     text-transform: uppercase; 
     border-radius: 4px; 
     text-decoration: none; 
     text-decoration: none; 
     padding: 12px; 
     color: $accent; 
     cursor: pointer; 
     border: 1px solid $accent; 
     background: transparent; 
     padding: 4px; 
     font-size: 10px; 
    } 

    li { 
     list-style-type: none; 
    } 

    ul { 
     padding-left: 0 !important; 
     height: 300px; 
     overflow-y: auto; 
     overflow-x: hidden; 
    } 

    .icon-container { 
     display: flex; 
     margin-top: 0; 
     align-items: center; 
     justify-content: center; 
    } 

    .icon-container img { 
     margin-right: 0; 
     margin-right: 8px; 
    } 

    .icon-container h6 { 
     font-weight: 200; 
     display: inline-flex; 
     margin-right: 15px; 
    } 

    .icon { 
     height: 32px; 
     margin-right: 10px; 
     display: inline-flex; 
    } 

Answer 1

でcol-*の必要性はrowの即時子供がないようにすることができます。 row>shop-details>col*は、shop-detailsがブートストラップrowの負のマージン（-15px）を上書きしているため、動作しません。

Answer 2

私はisseuがページ全体に収まるようにcolsのが広すぎます原因に

.shop-details { 
    padding:18px; 
} 

であると考えています。すなわちそれはもはやフィットフル12