bootstrap 4 列似乎挡住了其余列以占据整行

Question

我想在同一行上放置 2 个 div。一个占用8列，下一个占用4列。

但是，它会自动屏蔽行中的剩余列，导致每个 div 与 col-xx-xx 占据一整行。这就是我的意思：

我如何让它停止阻塞该行的其余部分，以便我可以将两个 div 放在同一行？

通过删除其内容使具有 4 列的 div 占用更少 space 是行不通的。将具有 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

我认为问题是由于

.shop-details {
     padding:18px;
}

这使得列太宽而无法跨页显示。即它不再适合完整的 12.

Answer 2

col-* 需要成为 row 的直接 children。 row>shop-details>col* 将不起作用，因为 shop-details 覆盖了 Bootstrap row 的负边距 (-15px)，使您的列换行。

bootstrap 4 列似乎挡住了其余列以占据整行

bootstrap 4 columns seem to block off rest of columns to take up the full row

html

css

twitter-bootstrap

twitter-bootstrap-4