在 Twitter Bootstrap 装订线中放置垂直线的最佳方法 [英] Best way to put a vertical line in the Twitter Bootstrap gutter

问题描述

<div class="span6">一些内容
<div class="span6">一些内容

我想在这两列之间的边沟中间放一条垂直线.

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

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

有什么想法吗?

解决方案

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

我的解决方案是对垂直线 div & 使用绝对定位.我必须给 span 列一个位置:

<div class="span6">一些内容
<div class="span6" style="position:relative"><div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>部分内容

剩下的唯一问题是 -15px left 假设一个特定尺寸的装订线宽度(twitter bootstrap 在第二个跨度上放置一个左边距以获得装订线)&使用响应 twitter bootstrap，这可以根据屏幕分辨率而改变.-15px 是安全的，但不会完全集中在较小的设备上.

<div class="row-fluid">

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

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

</div>

I want to put a vertical line down the middle of the gutter between these two columns.

The line is not the full length of the columns - so I can't just use a border.

I've tried changing my layout to span6, span1, span5 and using the span1 column for the line, but it messes up the space for my right content.

Any ideas ?

解决方案

Thanks for the answers. But the problem was not just a border. The vertical line has to be for only part of the length of the columns.

My solution was to use absolute positioning for the vertical line div & I had to give the span column a position:

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

The only remaining issue is that the -15px left assumes a gutter width (twitter bootstrap puts a left margin on the second span to get the gutter) of a certain dimension & with response twitter bootstrap this can change depending on screen resolution. -15px is safe but won't be quite centered on smaller devices.

这篇关于在 Twitter Bootstrap 装订线中放置垂直线的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！