时间戳

首页 > 解决方案 > 当基于断点隐藏/显示时，引导行不填充屏幕宽度

css - 当基于断点隐藏/显示时，引导行不填充屏幕宽度

问题描述

我有一个引导容器流体，其中包含一行。该行应仅在大于“中”的屏幕上显示。为此，我在行类中添加了“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/ （您可能必须使输出窗口稍大以触发可见性）。

标签： cssbootstrap-4

解决方案

而不是使用d-md-block你可以使用d-md-flex：

<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您删除（覆盖）上的 flex 规则row，因此列 ( col-*) 也会中断。

推荐阅读