ブートストラップ4のグリッドカラムからパディングガターを取り除く

ブートストラップ4にガターレスグリッドを作成するにはどうすればよいですか？ブートストラップ4のグリッドカラムからパディングガターを取り除く

ガターを取り外すための公式のAPIはありますか、それともマニュアルですか？

2016-04-04 Blair Anderson

ブートストラップ4： すぐに.no-guttersとなります。ソース：https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3：

は、カスタムCSSが必要です。

スタイルシート：その後

.row.no-gutters { 
    margin-right: 0; 
    margin-left: 0; 

    & > [class^="col-"], 
    & > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    } 
}

使用する：

<div class="row no-gutters"> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
</div>

それはします：

直下のすべての列からのパディングを削除する行から
をマージンを削除します行

出典

2016-04-04 21:59:57

このCSSコードを使用して、ブートストラップに溝のないグリッドを表示することができます。

.no-gutter.row, 
.no-gutter.container, 
.no-gutter.container-fluid{ 
    margin-left: 0; 
    margin-right: 0; 
} 

.no-gutter>[class^="col-"]{ 
    padding-left: 0; 
    padding-right: 0; 
}

出典

2016-04-04 22:11:13 canil

あなたはミックスインmake-col-readyを使用してゼロにガター幅を設定することができます。

@include make-col-ready(0);

出典

2016-12-12 10:36:58 roNn23

Bootstrapの私のバージョンでは、少なくともmake-col-ready（）ミックスインはパラメータを受け付けないようです。 :(そして、奇妙なことに、私はブートストラップがこのミックスインをどこに使っているのか見当がつきません...何が...：^） – NoOne

端から端までの設計が必要ですか？親.containerまたは.container-fluidを削除します。

あなたは.rowと直接の子の列からパディングを削除する必要がある場合はまだあなたがあなた自身のCSSファイルに上記@Brianからのコードでクラス.no-guttersを追加する必要があり、実際にそれは箱から出してすぐ "ではありません、 https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

出典

2018-01-23 07:30:43

ブートストラップ4のグリッドカラムからパディングガターを取り除く

答えて

関連する問題