web-dev-qa-db-ja.com

Bootstrap 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;
twitter-bootstraptwitter-bootstrap-3bootstrap-4
78
Tim

また、この問題を「修正」する「行」を各コンテナに追加する必要があります。

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

http://jsfiddle.net/3px20h6t/ を参照してください

116
PArt

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クラスを子要素として追加すると同じものが削除されます。

28
Kishore Kumar

私はティムと同じ要件を持っていると思いますが、答えはどれも「通常の内部ガターを備えたビューポートの端から端までの列」ソリューションを提供しません。または、別の方法：最初と最後の列を取得してコンテナのパディングに侵入し、列間の通常の溝を維持しながらビューポートのエッジにフローする方法。

full width rows

私が言えることから、きちんとしたきれいな解決策はありません。これは私にとってはうまくいくものですが、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と同じように機能します。

12
Lucas Nelson

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 ：に記載されています。

行は列のラッパーです。各列にはhorizo​​ntalパディング（ガターと呼ばれる）があり、それらの間のスペースを制御します。このパディングは、negativeマージンで行に打ち消されます。これにより、列内のすべてのコンテンツが視覚的に左側に揃えられます。

そして、同様に文書化されたソリューションについて：

列には水平パディングがあり、個々の列の間に余白が作成されますが、行の余白を削除し、列の余白を。no-guttersで削除できます。行。

ボーナス：他の回答で見つかった間違いについて

  • documentation のように、すべてのコンテンツをcol- sに入れてrow- sでラップしていることを確認する代わりに、ブートストラップのコンテナークラスをハッキングしないでください。

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

  • それでも誰かがハッキングをしなければならない場合（誰かが既に物事を台無しにしていて、すぐに問題を修正する必要がある場合）、代わりに水平方向のパディングを削除するためにBootstrapのpx-0を使用するか、pl-0 pr-0を使用するか、スタイルを再発明することを検討してください。
6
Just Shadow

これらの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;
}
3
Aaron Nuñez

新しいアルファ版では、 ユーティリティ間隔クラス を導入しました。巧妙な方法で使用する場合、構造を微調整できます。

ユーティリティクラスの間隔

<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; }
3
Tim Vermaelen

container-fluidによって追加されたパディングを、左右のパディングを0としてマークすることで無効にしないのはなぜですか？

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

さらに良い方法は？コンテナレベルでパディングがまったくありません（クリーナー）

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

3
iCrus

質問に対して正しい答えを出した人はいないと思います。私の作業ソリューションは次のとおりです。

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>
  1. 次に、css部分で特異性を使用してこれを行います。
.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

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

2
Sahil Kumar Singh

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

1
Dave

Bootstrap 4の概要は次のとおりです。

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

わたしにはできる。

1
Dm Mh

Configuratiorを使用している場合は、@grid-Gutter-widthを30pxから0に設定できます。

1
Stefan

私は自分でこれに苦労してきましたが、ついにそれがわかったと信じています。この質問に対する回答の失敗数は信じられないほどです

必要なことは、すべての.col要素からパディングを削除し、.container-fluidからもパディングを削除することです。

私のcssファイルに以下を追加することで、これを自分のプロジェクトで少しずさんに実行しました。

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

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

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

0
Max Flanagan