Bootstrap 4网格由于全宽行空空间

Question

我有一个带有广告的引导网格布局，我需要在其中添加一个横幅行。我找到了一种方法，在广告和其中的横幅之间添加一个容器，并在其中单独一行。但现在我有一个问题，你可以在图片中看到。

有没有办法让广告定位得更好，并避免未使用的空白处？

Note1:列数与屏幕大小有关。

Note2:一行中的Banners负责列数(使用d-none技巧)

​

​

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>

        <div class="container">
             <div class="row">
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
                 <div class="col-3 banner d-sm-none d-md-block">Banner</div>
             </div>
        </div>

        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
        <div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
    </div>
</div>

Answer 1

由于您在每一行中使用的是4列，因此您需要将广告列放在单独的行中。Bootstrap网格系统在12列布局上工作。因此，每行中的列的总和必须为12。您可以在一行中包含列的任意组合，例如.col-md-4、.col-md-4和.col-md-4。

不需要采取单独的广告横幅容器。

试试下面的代码。

​

<div class="container">
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
        <!-- Ad banners-->
        <div class="row">
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
                <div class="col-3 banner">Ad banner</div>
        </div>
        <div class="row">
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
            <div class="col-md-3 ad">Col-1</div>
        </div>
    </div>

​