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

【问题标题】：Best way to put a vertical line in the Twitter Bootstrap gutter在 Twitter Bootstrap 装订线中放置垂直线的最佳方法
【发布时间】：2013-07-08 15:38:12
【问题描述】：

<div class="row-fluid">

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

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

</div>

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

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

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

有什么想法吗？

【问题讨论】：

我认为你应该检查一下这个 [stackoverflow.com/questions/8793876/… [1]: stackoverflow.com/questions/8793876/twitter-bootstrap-borders

标签： css twitter-bootstrap

【解决方案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

【讨论】：

【解决方案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 在第二个跨度上放置一个左边距以获得排水沟）并且响应 twitter bootstrap 这可能会根据屏幕分辨率而改变。 -15px 是安全的，但不会完全集中在较小的设备上。

【讨论】：

【解决方案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;
    }
}

【讨论】：