グリッドに不要なパディングを追加したブートストラップ3および4 .container-fluid

コンテンツを流動的にしたいの.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され、行に設定された負のマージンによって子要素としてクラスを追加すると、同じものが削除されます。

5年が経過しましたが、ブートストラップルールに従わない（または反対する）回答がたくさんある、または実際に質問に回答しないというのは非常に奇妙です...

短い答え：行の
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>、ファイルの最後に追加するのを忘れていました。上記のコードでも修正されています）

注意：

コンテナ自体のパディングも削除したい場合があります。この場合、ドキュメントで推奨されているように、ドロップ.containerまたは.container-fluidクラスを検討してください。

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

長い答え：

あなたが得るパディングは実際にBootstrapのドキュメントに文書化されています：

行は列のラッパーです。各列には、それらの間のスペースを制御するための水平パディング（ガターと呼ばれる）があります。このパディングは、マージンが負の行で打ち消されます。このようにして、列のすべてのコンテンツが左側に視覚的に配置されます。

また、文書化されたソリューションについて：

列には水平パディングがあり、個々の列間にガターを作成しますが、行のマージンを削除し、.rowに.no- guttersを使用して列のパディングを削除できます。

コンテナの落下について：

エッジツーエッジのデザインが必要ですか？親の.containerまたは.container-fluidをドロップします。

おまけ：他の回答で見つかった間違いについて

• あなたは内のすべてのコンテンツを入れていることを行うのではなく、ブートストラップのコンテナクラスをハッキング避けcol-sとでそれらを包んだrowよう-s ドキュメントは言います：

グリッドレイアウトでは、コンテンツは列内に配置する必要があり、列のみが行の直接の子になる場合があります。

• それでもハッキングが必要な場合は（誰かがすでに混乱していて、問題をすばやく修正する必要がある場合に備えて）、px-0代わりにブートストラップを使用して水平パディングを削除するpl-0 pr-0か、スタイルを再発明することを検討してください。

私はTimと同じ要件を持っていたと思いますが、いずれの回答も「通常の内部ガターを備えたビューポートの端から端までの列」ソリューションを提供しません。または別の言い方をすると、列間の通常の余白を維持しながら、最初と最後の列をコンテナのパディングに入れてビューポートの端に流し込むにはどうすればよいですか。

私が言えることから、清楚な解決策はありません。これは私にとってはうまくいきますが、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、行と列の間にaを入れ子にして、コンテナのパディングにプッシュするための追加の-15pxマージンを生成することです。余分な負のマージンにより、小さなビューポートで（空白への）水平スクロールが作成されます。これを抑制するにはoverflow-x: hidden、に追加する.row必要があります。

これはと同じように.container-fluid機能し.containerます。

そこで、Bootstrap 4の簡単な要約を以下に示します。

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

わたしにはできる。

左と右のパディングを0としてマークすることにより、container-fluidによって追加されたパディングを無効にしませんか？

<div class="container-fluid pl-0 pr-0">

さらに良い方法は？コンテナーレベルでパッドがまったくない（クリーナー）

<div class="container-fluid 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倍ではpt-5なく、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; }

誰もその質問に正しい答えを出していないと思います。私の実用的な解決策は次のとおりです。1。別のクラスをコンテナ流体クラスの例（.maxx）とともに宣言します。

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

2. 次に、CSS部分で特異性を使用してこれを行います：

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

これは100％機能し、左右からパディングを削除します。これがお役に立てば幸いです。

configuratiorを使用している場合は、@grid-gutter-widthfrom 30pxをtoに設定できます。0

使用<div class="container-fluid" style="padding: 0px !important"> してみましたが動作しているようです。

私は自分自身でこれに苦労してきました、そして私は最終的に私がそれを理解したと信じています。この質問にどれだけ多くの失敗した回答があるかは驚くべきことです

すべての.col要素からパディングを削除し、.container-fluidからもパディングを削除するだけです。

私のcssファイルに次のコードを追加することで、自分のプロジェクトで少しだらしなくこれを行いました。

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

私が使用しているすべての異なるcolサイズを説明するために、そこにはさまざまなcolサイズがあります。私はCSSを書くためのよりきれいな方法があると確信していますが、これは最終結果を示しています。

使用px-0上containerとno-gutters上のrowパディングを削除します。

Bootstrap 4からの引用-グリッドシステム：

行は列のラッパーです。各列には、それらの間のスペースを制御するための水平パディング（ガターと呼ばれる）があります。このパディングは、マージンが負の行で打ち消されます。このようにして、列のすべてのコンテンツが左側に視覚的に配置されます。

列は、しかし、あなたが列から行からのマージンとパディングを削除することができ、個々の列の間の雨どいを作成するための水平方向のパディングを持っている.no-guttersの.row。

以下はライブデモです：

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

理由この作品はそれであるcontainer-fluidとcolの両方が、次のパディングを持っています：

padding-right: 15px;
padding-left: 15px;

px-0から水平パディングを削除したり、からパディングを削除しcontainer-fluidたりno-guttersできますcol。