web-dev-qa-db-ja.com

Twitter Bootstrapsグリッドシステムを使用して2つの列の間に線を追加する方法

中央に線がある2列レイアウト。

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
gridtwitter-bootstrap
49
ehabd

私はあなたの質問を正しかったと思います...これは以下のコードです。以下のインラインスタイルは、単に説明のためのものです。 CSSファイルでスタイリングを適用します。

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

上記のコードは this image を出力します。

enter image description here

57
GaryP

私のソリューションは、:before疑似要素を使用して、列の間に配置された要素を配置します。これはHTML要素をこれ以上必要とせず、.col-*クラスの直接の子.border-between要素に適用されます。これは、.rowと同じ要素に適用する必要があります。

[〜＃〜] html [〜＃〜]

<div class="row border-between">
  <p class="col-sm-6">This column does not have a border, because it's a first child.</p>
  <p class="col-sm-6">This column has a border to the left</p>
</div>

[〜＃〜] css [〜＃〜]

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}
78
Ross Angus

@Ross Angusソリューションに基づいて、高さを調整する方法を見つけました。各列の境界線の上に配置するだけです。

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}
29
Anne Claire

非常によく似た答えに基づいて： https://stackoverflow.com/a/11299934/1478467

この問題を攻撃するには、境界線または行の背景の2つの角度をお勧めします。 demo（jsfiddle） です。

背景オプションのサンプルの下にある唯一の欠点は、複雑な背景を使用しない限り、実際に線の幅を制御できないことです。

<div class="row myBackground">
        <div class="span6">span6</div>
        <div class="span6">span6</div>
</div>

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }
2
Sherbrow

User2136179が提供するCSSを展開すると、下の境界線もできます。 matchHeightを使用する必要がありますが、Bootstrapテーブルグリッドのように見えるグリッドを取得できます。 チェックアウト

// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();
1
Carlos Zapata

Bootstrap 4に border utility classes が追加されました。したがって、Bootstrap 4を使用している場合、これらのクラスを必要な列で使用できます。たとえば、列Aと列Bの間に境界線が必要な場合は、_border-right_列Aのクラス.

デモは次のとおりです。

_<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>_
0
Kodos Johnson

左の列は48％の幅、右は48％の幅、中央の2％divは背景を繰り返して設定できると思います。あなたは自分でそれを処理する必要があります

0
Huy trịnh