grid - 如何使用 Twitter Bootstraps 网格系统在两列之间添加一条线

Question

两列布局，中间有一条线。

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]

Answer 1

我的解决方案使用 :before 伪元素在列之间放置定位元素。这不需要更多的 HTML 元素，并且仅应用于 .border- Between 类的直接子 .col-* 元素。这应该应用于与 .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;
}