引导行在基于断点隐藏/显示时不会填充屏幕宽度

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上的弹性规则，因此列(col-*(也会中断。