36

マージンやパディングのない、文字通り 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/

4

10 に答える 10

58

別のオプションは、「ガターレス」列を適用したいときはいつでも、独自の特別な 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/73960

于 2013-08-13T17:37:38.640 に答える
8

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

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

更新されたフィドル

于 2013-08-13T06:49:40.140 に答える
5

独自の CSS を記述せずにこれを行う方法があるに違いないと確信しています。マージンとパディングを上書きする必要があるのはクレイジーです。必要なのは 2 列のグリッドだけでした。

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

http://jsfiddle.net/KxCkD/

于 2013-08-13T06:53:40.873 に答える
5

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 を追加する必要があります。inner-content私のjsfiddleを参照してください。このようなものを各列に入れると、古い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;
}
于 2013-11-12T18:27:14.420 に答える
4

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;
        }
    }
}
于 2015-09-30T23:12:23.667 に答える
1

「row」の代わりに「clearfix」を使用してください。負のマージンがないことを除いて、まったく同じです。「行」の使用方法を確認すると、それが唯一の違いであることがわかります。

于 2014-01-31T16:52:43.640 に答える
0

より強力な (そして 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 を使用しないでください。

ソース

于 2013-08-13T07:07:59.390 に答える