引导程序 4 在移动设备上隐藏一列

Question

我有这个代码：

<div class="row">
                <div class="col-lg-3">
                    <div class="ava-block">
                    </div>
                </div>
                <div class="col-lg-6">
                    ...
                </div>
                <div class="col-lg-3">
                   ....
                </div>
</div>

如何在移动设备上隐藏第一个col-lg-3并将col-lg-6更新为col-lg-9？我不需要在移动设备上显示col-lg-3。但是，如果我用 css 隐藏media那么col-lg-6不会调整为全宽。

Answer 1

听起来你想要这样的东西。使用显示实用程序显示/隐藏列。对col-lg-6使用col，使其始终填充剩余宽度。

<div class="container-fluid">
    <div class="row">
        <div class="col-3 d-none d-lg-block">
            <div class="ava-block border">
                3
            </div>
        </div>
        <div class="col">
            <div class="ava-block border">
                6-9
            </div>
        </div>
        <div class="col-3">
            <div class="ava-block border">
                3
            </div>
        </div>
    </div>
</div>

演示：https://www.codeply.com/go/gyuRoUt68s

Answer 2

要在移动设备上隐藏div，您必须使用 css 类.d-none .d-sm-block并且要在移动设备上仅使div 变大，您必须使用.col-xs-9

所以：

<div class="row">
  <div class="d-none d-sm-block col-lg-3">
    <div class="ava-block">
    </div>
  </div>
  <div class="col-xs-9 col-lg-6">
    ...
  </div>
  <div class="col-lg-3">
    ....
  </div>
</div>

查看展示的 Bootstrap 文档