css - Bootstrap 経由で、ウェルに縦の仕切りを追加するにはどうすればよいですか?

Question

井戸の描画にブートストラップを使用しています。このウェルでは、2 つ作成しspan6、これら 2 つの列の間に垂直方向の仕切りを描画したいと考えています。どうすれば目標を達成できますか?

Answer 1

最初の列を除くすべての列に左の境界線を描画します。

.well [class^="span"] + [class^="span"] {
    margin-left: -1px; /* compensate border width */
    border-left: 1px solid #e3e3e3;
}

---

または、CSS 列を使用することもできます (接頭辞が必要です)。

.well.col {
    columns: 2;
    column-gap: 20px;
    column-rule: 1px solid #e3e3e3;
}

これまでに使用したことがない場合は、CSS 列に関するチュートリアルを確認してください。

Answer 2

境界線が 1px を追加しすぎるため、要素が幅全体を占めると、選択した回答が壊れます。これに対処するために、境界線を考慮してマージンを調整できます。

.line-right {
  margin-right: -1px;
  border-right: 1px solid black;
}

より大きな境界線が必要な場合は、余白でそれを考慮してください!

Answer 3

<hr>HTMLタグはいつでも使用できます。