css - Bootstrap Column，隐藏而不是隐藏

Question

我有2个div

 <div class="col-lg-10 hidden-md">ABC</div>
 <div class="col-lg-2  hidden-md">123</div>

“ABC”包含不会调整大小的内容(有意)

当没有足够的空间容纳“123”时，Bootstrap 会将其移至“ABC”下方。在这种情况下，我希望“123”消失，永远不要“在”。

有办法吗？

注意我已经为 md 及以下隐藏了它。

Answer 1

编辑:此代码是 Bootstrap 3 特定的 - 请参阅 Alec's comment获取 Bootstrap 4 信息。

hidden-md类实际上并不隐藏视口(viewport)的元素在或低于“中等”视口(viewport)宽度，它在视口(viewport)落入中等宽度时隐藏元素仅。。 p>

您应该能够使用 Bootstrap .visible类 hide certain elements with this class当视口(viewport)小于指定大小时。在这种情况下，第二个 <div>仅在视口(viewport)为“大”时显示，当视口(viewport)小于“大”(即中、小等)时消失。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10">ABC</div>
        <div class="col-md-2 visible-lg">123</div>
    </div>
</div>

这是一个 CodePen example - 尝试拉伸(stretch)和缩小浏览器的宽度以查看发生了什么。