web-dev-qa-db-ja.com

Bootstrapギャップのない3グリッド

文字通り50％でマージンやパディングのない2列のグリッドを作成しようとしています。

Bootstrap 3でこれを達成するにはどうすればいいですか？

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 offset-0">Col 1</div>
        <div class="col-sm-6 offset-0">Col 2</div>
    </div>
</diV>

CSS

.container {
    background: green;
    overflow: hidden;
}
.row > * {
    background: blue;
    color: #fff;
}
.row :first-child {
    background: red;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}

デモ- http://jsfiddle.net/pjBzY/

csstwitter-bootstraptwitter-bootstrap-3
36
John Magnolia

Bootstrap 3のグリッドシステムでは、Bootstrap 2からの思考に少し横方向のシフトが必要です。BS2の列（col-*）はBS3の列（col-sm-*、など）が、同じ結果を達成する方法があります。

フィドルのこの更新を確認してください： http://jsfiddle.net/pjBzY/22/ （以下にコピーしたコード）。

まず、すべてのサイズで50/50列が必要な場合は、画面サイズごとに列を指定する必要はありません。 col-sm-6は、小さな画面だけでなく中規模および大規模にも適用されます。つまり、class="col-sm-6 col-md-6"は冗長です（col-sm-6 col-md-8など、異なるサイズの画面で列幅を変更する場合に利点があります）。

マージンの問題に関しては、負のマージンは、BS2で可能であったよりも柔軟な方法でテキストのブロックを揃える方法を提供します。 jsfiddleでは、最初の列のテキストがrowの外側の段落のテキストと視覚的に整列します。ただし、列が適用されない「xs」ウィンドウサイズは例外です。

各列の間にパディングがあり、視覚的な負のマージンがないBS2の動作に近い動作が必要な場合は、各列にinner-divを追加する必要があります。私のjsfiddleのinner-contentを参照してください。各列にこのようなものを入れると、古いcol-*要素がBS2で行ったように動作します。

jsfiddle HTML

<div class="container">
    <p class="other-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
    <div class="row">
        <div class="col-sm-6 my-column">
            Col 1
            <p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
        </div>
        <div class="col-sm-6 my-column">
            Col 2
        </div>
    </div>
</div>

cSS

.row {
    border: blue 1px solid;
}
.my-column {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-column:first-child {
    background-color: red;
}

.inner-content {
    background: #eee;
    border: #999;
    border-radius: 5px;
    padding: 15px;
}
5
keithjgrant

もう1つのオプションは、「ガターレス」列を適用するたびに独自の特別なCSSクラスを作成することです。

HTML

<div class="container">
    <div class="row no-Gutter">
        <div class="col-6 col-sm-6 col-lg-6">Col 1</div>
        <div class="col-6 col-sm-6 col-lg-6">Col 2</div>
    </div>
</div>

CSS

.no-Gutter [class*="-6"] {
    padding-left:0;
}

デモ： http://bootply.com/7396

58
Zim

私は常にこのスタイルをBootstrap LESS/SASSに追加します：

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

次に、HTMLで次のように記述できます。

<div class="row row-no-padding">
28
martinedwards

大きな画面で直接またはカスタムクラスを使用して、.rowの負のマージンをオーバーライドする必要があります。

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

更新されたフィドル

8
koala_dev

私は自分のCSSを書かずにこれを行う方法がなければならないと確信しています。その狂気私はマージンとパディングを上書きしなければなりません、私が望んだのは2列のグリッドだけでした。

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

5
John Magnolia

Martinedwardsや他の人のアイデアを一般化して、偶数列と奇数列の子のパディングを調整することで、（ペアではなく）列の束を接着することができます。このクラスの定義.no-Gutterを追加し、.row要素に配置します

.row.no-Gutter > [class*='col-']:nth-child(2n+1) {
    padding-right: 0;
 } 

.row.no-Gutter > [class*='col-']:nth-child(2n) {
    padding-left: 0;
}

またはSCSSで：

.no-Gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}
4
yuvilio

answer で指定された @ yuvilio は2つの列でうまく機能しますが、2つ以上の列では this from here より良いソリューションになります。要約すれば：

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

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

「行」の代わりに「clearfix」を使用します。負のマージンがないこと以外はまったく同じです。 「行」の使用方法をステップすると、それが唯一の違いであることがわかります。

1
Kyle

シンプルな以下のクラスを使用できます。

.nopadmar {
   padding: 0 !important;
   margin: 0 !important;
}
<div class="container-fluid">
  <div class="row">
           <div class="col-md-6 nopadmar">Your Content<div>
       <div class="col-md-6 nopadmar">Your Content<div>
  </div>
</div>
0
Sandeep Pattanaik

より強力な（そして100％流動的な）Bootstrap 3グリッドは3つのサイズで提供されます。 Tiny（スマートフォン用.col-）、Small（タブレット用.col-sm-）およびLarge（ラップトップ/デスクトップ用.col-lg- * ）。 3つのグリッドサイズにより、さまざまなデバイス（デスクトップ、タブレット、スマートフォンなど）でグリッドの動作を制御できます。

2.xとは異なり、Bootstrap 3は固定（ピクセルベース）グリッドを提供しません。単純なカスタムラッパーを使用して固定幅のレイアウトを実現することはできますが、パーセンテージベース（流体）のグリッドは1つだけになりました。 .containerクラスと.rowクラスはデフォルトで流動的であるため、3.xマークアップで.row-fluidまたは.container-fluidを使用しないでください。

ソース

0
xzegga
.row.row-no-padding {
    margin-left: 0 !important;
    margin-right: 0 !important;

    & > [class^="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
0
damlys