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

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 使用绝对定位，我必须给 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 是安全的，但不会完全集中在较小的设备上。

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