html - Bootstrap 4列隐藏在小 View 中让出现空白

Question

我是第一次使用 Bootstrap 4。我想要一个网站，在大 View 中左右两侧都有空白栏，但在小 View 中让它们消失。

我使用这个 HTML 结构来创建 3 列:空白列和我们可以在中间看到的灰色列:

<div class="container-fluid">
    <div class="row">
        <div class="col"></div>
        <div class="col-sm-12 col-md-8"></div>
        <div class="col"></div>
    </div>
</div>

但是由于 Bootstrap 将 min-height: 1px; 应用于所有 .col-* ，当应该隐藏空白列时，它们会创建一点空间，打破我想做的。

我怎样才能做我想做的事？我使用 Bootstrap 4 的方式好吗？

Answer 1

要使列 (.col) 在一行 (.row) 中居中，您可以添加类 justify-content-center (参见 flex utilities ) 到该行:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col col-sm-12 col-md-8">Hello World</div>
    </div>
</div>

因此不需要空列来使列居中。

---

另一种解决方案是使用 d-* 类 ( see utilities ) 来隐藏列:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col d-none d-md-block">1</div>
        <div class="col-sm-12 col-md-8">2</div>
        <div class="col d-none d-md-block">3</div>
    </div>
</div>