Question

我有一个引导容器流体，其中包含一行。该行应仅在大于“中”的屏幕上显示。为此，我在行类中添加了“ d-none d-md-block”。就外观/隐藏而言，这是可行的，但是其中的所有列都填满了屏幕的宽度，因此，当它们应该是水平时，它们是垂直堆叠的。奇怪的是，如果我删除d-none d-md-block类，这些列将按预期水平显示。代码：

<div class="container-fluid">
    <div class="row d-none d-md-block">
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
    </div>
</div>

提琴：

https://jsfiddle.net/aq9Laaew/139426/ （您可能必须将输出窗口稍大一些才能触发可见性。）

Answer 1

您可以使用d-md-flex来代替d-md-block：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row d-none d-md-flex">
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
        <div class="col-auto">
            <div class="menu_circle">Link 1</div>
        </div>
    </div>
</div>

Bootstrap 4.1正在使用flexbox格式化网格系统的行和列。通过使用d-md-block，您可以删除（覆盖）row上的flex规则，因此列（col-*）也会中断。

当根据断点隐藏/显示引导行时，引导行不会填充屏幕的宽度

1 个答案: