隐藏在小视图中的Bootstrap 4列会出现空白区域

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>

但是由于min-height: 1px;被Bootstrap应用于所有.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>