Bootstrap 隐藏在小视图中的 4 列显示为空白 space

Question

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

我使用这个 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 应用于所有 .col-* 的 min-height: 1px;，当应该隐藏空白列时，它们会创建一点 space，打破我想做的。

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

Answer 1

要使一行 (.row) 中的列 (.col) 居中，您可以将 class 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-* classes (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>

Bootstrap 隐藏在小视图中的 4 列显示为空白 space

Bootstrap 4 columns hidden in small view let appear blank space

html

css

twitter-bootstrap

twitter-bootstrap-4