小さなビューで隠されたブートストラップ4列は空白に見えます

Question

私は初めてブートストラップ4を使用しています。私は大規模なビューで左右の空白の列を持つWebサイトを持っていますが、小さなビューでそれらを消滅させたいと思います。

私は3列作成するには、このHTML構造を使用します。空白のものと私たちは途中で見ることができますグレー1：

<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;のこれはブートストラップによってすべての.col-*に適用されます。空白の列を非表示にする必要があります。

どのように私は私がやりたいことができますか？ブートストラップ4を使っているのですか？行のカラム（.col）を中央に

Answer 1

（.row）あなたが行に（flex utilitiesを参照）クラスjustify-content-centerを追加することができます。

<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>