Bootstrap 填充剩余高度

Question

所以我使用引导网格并且无法处理当 div 没有像这样填充整个高度时创建的空白空间

当我有这种配置时

<div class="row">
    <div class="col-lg-8"> <div>diklat bkcu</div></div>
    <div class="col-lg-4"> <div>peserta diklat bkcu</div></div>
    <div class="col-lg-8"> <div>grafik perkembangan gerakan</div></div>
    <div class="col-lg-4"> <div>tabel perkembangan</div></div>
</div>

我想要的就是这样 我可以通过使用这个布局得到这个

<div class="row">
    <div class="col-lg-8"> 
        <div>diklat bkcu</div>
        <div>grafik perkembangan gerakan</div>
    </div>
    <div class="col-lg-4"> 
        <div>peserta diklat bkcu</div>
        <div>tabel perkembangan</div>
    </div>
</div>

但问题是我如何使用看起来像这样的移动布局来获得这个桌面布局（第二张图片）？？？

+---------------------------------+
| diklat bkcu                     |
+---------------------------------+
| peserta diklat bkcu             |
+---------------------------------+
| grafik perkembangan gerakan     |
+---------------------------------+
| tabel perkembangan              |
+---------------------------------+

Answer 1

你可以试试这个

<div class="row ">
    <div class="col-lg-8 d-sm-none"> 
        <div>diklat bkcu</div>
        <div>grafik perkembangan gerakan</div>
    </div>
    <div class="col-lg-4 d-sm-none"> 
        <div class="row">peserta diklat bkcu</div>
        <div class="row">tabel perkembangan</div>
    </div>
    <div class="col-sm-12 d-none">diklat bkcu</div>
    <div class="col-sm-12 d-none">peserta diklat bkcu  </div>
    <div class="col-sm-12 d-none">grafik perkembangan gerakan </div>
    <div class="col-sm-12 d-none">tabel perkembangan  </div>
</div>

您只想要在没有空间的情况下工作的手机吗？ +---------------------------------+ | diklat bkcu | +---------------------------------+ | grafik perkembangan gerakan | +---------------------------------+ | peserta diklat bkcu | +---------------------------------+ | tabel perkembangan | +---------------------------------+

如果您想具体到移动版本，请尝试此方法。