Question

<div class="row-fluid">

    <div class="span6"> Some content </div>

    <div class="span6"> Some content </div>

</div>

我想在这两列之间的排水沟中间放一条垂直线。

这一行不是列的全长 - 所以我不能只使用边框。

我尝试将布局更改为span6，span1，span5并使用span1列作为行，但它会占用我正确内容的空间。

有什么想法吗？

Answer 1

如果您可以假设使用现代浏览器（支持CSS 3的浏览器），则可以使用box-sizing属性（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp）覆盖默认的Bootstrap .span6

您可能还希望将其封装在@media查询中，以避免在将浏览器调整为较小宽度时出现奇怪的左侧间距。

@media (min-width:979px) {
  .span6:not(:first-child) {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

Bootply

Answer 2

感谢您的回答。但问题不仅仅是边界。垂直线只能是列长度的一部分。

我的解决方案是使用绝对定位垂直线div＆amp;我必须给span栏一个位置：

<div class="row-fluid">

    <div class="span6"> Some content </div>

    <div class="span6" style="position:relative"> 
        <div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
        Some content 
    </div>

</div>

唯一剩下的问题是左边的-15px假定了一个特定尺寸的放大器宽度（推特自举在第二个跨度上放置左边距以获得阴沟）。响应twitter bootstrap，这可能会根据屏幕分辨率而改变。 -15px是安全的，但不会完全集中在较小的设备上。

Answer 3

在 Bootstrap 4.5.3 中你可以使用这个 html 代码：

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
    </div>
</div>

使用此 CSS：

@media (min-width: 768px){
    .container .row .col-md-3:not(:first-child){
        border-left: 1px solid #ccc;
    }
}

在Twitter Bootstrap装订线中放置垂直线的最佳方法

3 个答案: