コンテンツを流動的にしたいのですが、.container-fluid
をBootstrapのグリッドで使用すると、まだパディングが表示されています。パディングを取り除くにはどうすればよいですか?
.rowでパディングを取得できないことがわかりましたが、列を追加したいので、パディングはすぐに戻ります:O。
列を全幅で使用できるようにしたい。
例:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
私が持っている解決策:
Bootstrap.css、linke 1427および1428(v3.2.0)をオーバーライドします
padding-right: 15px;
padding-left: 15px;
に
padding-right: 0px;
padding-left: 0px;
また、この問題を「修正」する「行」を各コンテナに追加する必要があります。
<div class="container-fluid">
<div class="row">
Some text
</div>
</div>
http://jsfiddle.net/3px20h6t/ を参照してください
Bootstrapから実際のCSSを見つけてください
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.container-fluid
クラスを追加すると、15pxの水平方向のパディングが追加され、行に設定された負のマージンによって.row
クラスを子要素として追加すると同じものが削除されます。
私はティムと同じ要件を持っていると思いますが、答えはどれも「通常の内部ガターを備えたビューポートの端から端までの列」ソリューションを提供しません。または、別の方法:最初と最後の列を取得してコンテナのパディングに侵入し、列間の通常の溝を維持しながらビューポートのエッジにフローする方法。
私が言えることから、きちんとしたきれいな解決策はありません。これは私にとってはうまくいくものですが、Bootstrapでサポートされるものの範囲外です。しかし、今のところ動作します(Bootstrap 3.3.5および4.0-alpha)。
http://www.bootply.com/ioWBaljBAd
サンプルHTML:
<div class="container">
<div class="row full-width-row">
<div>
<div class="col-sm-4 col-md-3">…</div>
<div class="col-sm-4 col-md-3">…</div>
<div class="col-sm-4 col-md-3">…</div>
<div class="col-sm-4 col-md-3">…</div>
</div>
</div>
</div>
CSS:
.full-width-row {
overflow-x: hidden;
}
.full-width-row > div {
margin-left: -15px;
margin-right: -15px;
}
トリックは、行と列の間にdiv
をネストして、コンテナのパディングにプッシュするための余分な-15pxマージンを生成することです。余分な負のマージンは、小さなビューポートで(空白に)水平スクロールを作成します。抑制するには、overflow-x: hidden
を.row
に追加する必要があります。
これは、.container-fluid
でも.container
と同じように機能します。
5年が経ちましたが、従わない(または反対)bootstrapという非常に多くの答えがあるのは非常に奇妙ですルールに答えるか、実際に質問に答えないでください...
簡易回答
Bootstrapのno-gutters
クラスを使用して、パディングを削除します。
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
barebones HTML document.</p>
</div>
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
barebones HTML document.</p>
</div>
</div>
</div>
(また、ファイルの最後に</div>
を追加するのを忘れました。上記のコードでも修正されています)
ロングアンサー
取得するパディングは、実際にBootstrapの documentation :に記載されています。
行は列のラッパーです。各列にはhorizontalパディング(ガターと呼ばれる)があり、それらの間のスペースを制御します。このパディングは、negativeマージンで行に打ち消されます。これにより、列内のすべてのコンテンツが視覚的に左側に揃えられます。
そして、同様に文書化されたソリューションについて:
列には水平パディングがあり、個々の列の間に余白が作成されますが、行の余白を削除し、列の余白を。no-guttersで削除できます。行。
ボーナス:他の回答で見つかった間違いについて
col
- sに入れてrow
- sでラップしていることを確認する代わりに、ブートストラップのコンテナークラスをハッキングしないでください。グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。
px-0
を使用するか、pl-0 pr-0
を使用するか、スタイルを再発明することを検討してください。これらのCSSプロパティは、Bootstrapの.containerクラスでのみ必要です。コンテナのコンテンツが(ビューポートでscroll-xなしで)出てこなくても、通常のグリッドシステムを内部に配置できます。
HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
Your content here!
...
</div>
</div>
... more rows
</div>
CSS:
/* Bootstrap custom */
.container{
padding-left: 0rem;
padding-right: 0rem;
overflow: hidden;
}
新しいアルファ版では、 ユーティリティ間隔クラス を導入しました。巧妙な方法で使用する場合、構造を微調整できます。
ユーティリティクラスの間隔
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-3 pl-0">…</div>
<div class="col-sm-4 col-md-3">…</div>
<div class="col-sm-4 col-md-3">…</div>
<div class="col-sm-4 col-md-3 pr-0">…</div>
</div>
</div>
pl-0
およびpr-0
は、列の先頭と末尾のパディングを削除します。残っている問題の1つは、列に埋め込まれた行です。これらの行にはまだ負のマージンがあります。この場合:
<div class="col-sm-12 col-md-6 pl-0">
<div class="row ml-0">
</div>
バージョンの違い
また、ユーティリティの間隔クラスがバージョン4.0.0-alpha.4
以降に変更されたことにも注意してください。 2つのダッシュで区切られる前、たとえば=> p-x-0
およびp-l-0
など...
バージョン3のトピックにとどまるには、これがBootstrap 3プロジェクトで使用し、この特定の間隔ユーティリティのコンパスセットアップをbootstrap-sass
(バージョン3)またはbootstrap
(バージョン4.0.0- alpha.3)二重ダッシュ付き、またはbootstrap
(バージョン4.0.0-alpha.4以上)単一ダッシュ付き。
また、最新バージョンは、3だけではなく、比率の5倍まで上がります(例:pt-5
padding-top 5)。
コンパス
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;
@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";
CSS出力
もちろん、生成されたcssファイルからのみ、パディング間隔クラスを常にコピー/貼り付けできます。
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
container-fluidによって追加されたパディングを、左右のパディングを0としてマークすることで無効にしないのはなぜですか?
<div class="container-fluid pl-0 pr-0">
さらに良い方法は?コンテナレベルでパディングがまったくありません(クリーナー)
<div class="container-fluid pl-0 pr-0">
質問に対して正しい答えを出した人はいないと思います。私の作業ソリューションは次のとおりです。
<div class="container-fluid maxx">
<div class="row">
<div class="col-sm-12">
<p>Hello</p>
</div>
</div>
</div>
.container-fluid.maxx {
padding-left: 0px;
padding-right: 0px; }
これは100%動作し、左右からパディングを削除します。これがお役に立てば幸いです。
<div class="container-fluid" style="padding: 0px !important">
を使用しましたが、動作しているようです。
Bootstrap 4の概要は次のとおりです。
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-12"> //any cols you need
...
</div>
</div>
</div>
わたしにはできる。
Configuratiorを使用している場合は、@grid-Gutter-width
を30px
から0
に設定できます。
私は自分でこれに苦労してきましたが、ついにそれがわかったと信じています。この質問に対する回答の失敗数は信じられないほどです
必要なことは、すべての.col要素からパディングを削除し、.container-fluidからもパディングを削除することです。
私のcssファイルに以下を追加することで、これを自分のプロジェクトで少しずさんに実行しました。
.col, col-10, col-12, col-2, col-6 {
padding: 0!important;
}
.container-fluid {
padding: 0!important;
}
使用しているすべての異なるcolサイズを説明するために、異なるcolサイズがあります。私はCSSを書くためのよりクリーンな方法があると確信していますが、これは最終結果を示しています。