html - ブートストラップの 2 つの列の間の垂直分割線

Question

Twitter ブートストラップを使用しており、2 つの列 (span6) を持つ行があります。両方のスパンの間に垂直の仕切りを作成するにはどうすればよいですか?

ありがとう、ムルタザ

Answer 1

コードが次のようになっている場合:

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

次に、コンテンツを保持/スタイリングするために、「span6」DIVS 内で追加の DIVS を使用していると思いますか? そう...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

そのため、「mycontent-left」クラスに CSS を追加するだけで、仕切りを作成できます。

.mycontent-left {
  border-right: 1px dashed #333;
}

Answer 2

Bootstrap 4 には、border-right使用できるユーティリティ クラスがあります。

たとえば、次のことができます。

<div class="row">
  <div class="col-6 border-right"></div>
  <div class="col-6"></div>
</div>

Answer 3

私はそれをテストしました。それは正常に動作します。

.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    <div class="container">
      <div class="row vdivide">
        <div class="col-sm-3 text-center"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>

Answer 4

Bootstrap V5 では、要素に配置する.vr クラス<div>が導入されました。必要に応じて、要素内に配置して、要素内の<li>要素を分離します<ul>。

<ul class="navbar-nav">
  <li>Element 1</li>
  <li>
    <div class="h-100 vr"></div>
  </li>
  <li>Element 2</li>
</ul>

注 :.navbar-navクラスはnavbarsに関連しており、ラッピング要素が垂直線 (セパレーター) を正しく表示するために必要なlist-styleすべての子要素の css プロパティを設定します。none<li>

Answer 5

これを使用してください。100% 保証されています:-

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}