靴子填充剩余高度

Question

所以我使用了Bootstrap网格并且无法处理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 | +---------------------------------+

如果要在移动版本上进行特定设置，请尝试此方法。