如何在Twitter Bootstrap的间距中插入垂直线的最佳方法

Question

<div class="row-fluid">

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

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

</div>

我希望在这两列之间的装订线中间放一条垂直线。

该线不是整个列的长度-因此我不能只使用边框。

我已经尝试将布局更改为span6，span1，span5，并使用span1列作为线条，但它会使我的右侧内容的空间混乱。

有什么好的想法吗？

- user911625

---

我认为你应该检查这个链接：https://dev59.com/tGoy5IYBdhLWcg3wEJ9n。 - xionutz2k

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

->

Bootply

- Carol Skelly

Answer 2

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

我的解决方案是对垂直线div使用绝对定位，并且我必须给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在第二个span上放置左边距以获得槽宽），而响应式Twitter Bootstrap可以根据屏幕分辨率而变化。-15px是安全的，但在较小的设备上不会完全居中。

- user911625

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;
    }
}

- coffee3k