Bootstrap 4 隐藏问题

Question

我有一个简单的行和 4 列。只要屏幕尺寸为 MD 及以上，它就会显示在一行中。我想隐藏这些列，所以我在 "d-none d-md-block" 行中添加了两个 bootstrap 类，根据文档，一旦屏幕尺寸低于 md，它就应该隐藏。

但是输出很奇怪，出于某种原因，我的列不再排成一行，而是显示在另一行下方。

有帮助吗？？

这是代码，只要屏幕尺寸大于 md，列就应该在一行中。

<div class="d-none d-md-block row">
    <div class="col-md-3">
        <div>1</div>
    </div>
    <div class="col-md-3">
        <div>2</div>
    </div>
    <div class="col-md-3">
        <div>3</div>
    </div>
    <div class="col-md-3">
        <div>4</div>
    </div>
</div>

Answer 1

只需将 d-md-block 更改为 d-md-flex 即可，因为默认情况下行在 Bootstrap 中有 display:flex 属性并且您正在分配它 display:block 属性

<div class="d-none d-md-flex row">
    <div class="col-md-3">
        <div>1</div>
    </div>
    <div class="col-md-3">
        <div>2</div>
    </div>
    <div class="col-md-3">
        <div>3</div>
    </div>
    <div class="col-md-3">
        <div>4</div>
    </div>
</div>

Answer 2

就是这样：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>

    <div class="container">
        <div class="d-none d-sm-block">
            <div class="row">
                <div class="col">1</div>
                <div class=" col ">2</div>
                <div class=" col">3</div>
                <div class=" col">4</div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

您可以查看：https://jsfiddle.net/sugandhnikhil/muxt6eg1/

Bootstrap 4 隐藏问题

Bootstrap 4 hiding issue

asp.net-mvc-4

bootstrap-4