引导程序中两列之间的垂直分隔符
我使用twitter bootstrap，并有一个有两列（span6）的行。 如何创build两个跨度之间的垂直分隔线。
谢谢，Murtaza
如果你的代码如下所示：
<div class="row"> <div class="span6"> </div> <div class="span6"> </div> </div> 那么我假设你在“span6”DIVS内使用额外的DIVS来保存/devise你的内容？ 所以…
<div class="row"> <div class="span6"> <div class="mycontent-left"> </div> </div> <div class="span6"> <div class="mycontent-right"> </div> </div> </div>
所以你可以简单地添加一些CSS到“mycontent-left”类来创build你的divider。
.mycontent-left { border-right: 1px dashed #333; }
.row.vertical-divider { overflow: hidden; } .row.vertical-divider > div[class^="col-"] { text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #F2F7F9; border-right: 3px solid #F2F7F9; } .row.vertical-divider div[class^="col-"]:first-child { border-left: none; } .row.vertical-divider div[class^="col-"]:last-child { border-right: none; }
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row vertical-divider" style="margin-top: 30px"> <div class="col-xs-6">Hi there</div> <div class="col-xs-6">Hi world<br/>hi world</div> </div>
那么这里是另一个我已经使用了一段时间了。 它对我来说很好，因为我大多需要它在视觉上分开两列。 这也是响应。 这意味着，如果我有中等和大屏幕尺寸的彼此相邻的列，那么我会使用col-md-border ，这会在较小的屏幕尺寸上隐藏分隔符。
CSS：
@media (min-width: 992px) { .col-md-border:not(:last-child) { border-right: 1px solid #d7d7d7; } .col-md-border + .col-md-border { border-left: 1px solid #d7d7d7; margin-left: -1px; } }
在scss中，你可以从这里产生所有需要的类：
SCSS：
@media(min-width: $screen-md-min) { .col-md-border { &:not(:last-child) { border-right: 1px solid #d7d7d7; } & + .col-md-border { border-left: 1px solid #d7d7d7; margin-left: -1px; } } }
HTML：
<div class="row"> <div class="col-md-6 col-md-border"></div> <div class="col-md-6 col-md-border"></div> </div>
怎么运行的：
cols必须位于没有其他col的元素内，否则select器可能无法正常工作。
.col-md-border:not(:last-child)匹配.rowclosures前的最后一个元素，并向其添加右边框。
.col-md-border + .col-md-border与第二个div相同，如果这两个相邻并添加左边框和-1px的负边距。 负边距是为什么它不重要哪个列有更高的高度，并且分隔符将是1px与最高列相同的高度。
它也有一些问题…
- 当你尝试聪明/懒惰，并在同一行元素内使用
col-XX-X类和hidden-XX/visible-XX类时。 - 当你有很多列，需要像素完美的东西。 由于它将n-1列1px向左移动。
…但另一方面，它的响应，对于简单的html很好，并且很容易为所有的自举屏幕尺寸创build这些类。
当一列的内容较高时，要修正分隔符的丑陋外观太短，请将边框添加到所有列。 给每一个其他列负的余量，以弥补位置差异。
例如，我的三个列类：
.border-right { border-right: 1px solid #ddd; } .borders { border-left: 1px solid #ddd; border-right: 1px solid #ddd; margin: -1px; } .border-left { border-left: 1px solid #ddd; }
而HTML：
<div class="col-sm-4 border-right">First</div> <div class="col-sm-4 borders">Second</div> <div class="col-sm-4 border-left">Third</div>
如果你想使用与Bootstrap的水平分隔线相同的颜色，请确保使用#ddd。
我已经testing过了。 它工作正常。
.row.vdivide [class*='col-']:not(:last-child):after { background: #e0e0e0; width: 1px; content: ""; display:block; position: absolute; top:0; bottom: 0; right: 0; min-height: 70px; } <div class="container"> <div class="row vdivide"> <div class="col-sm-3 text-center"><h1>One</h1></div> <div class="col-sm-3 text-center"><h1>Two</h1></div> <div class="col-sm-3 text-center"><h1>Three</h1></div> <div class="col-sm-3 text-center"><h1>Four</h1></div> </div> </div>
那么我所做的就是删除相应的跨度之间的沟槽，然后为左跨度画一个左边框，为右跨度画一个右边框，这样他们的边界重叠，就是为了给一行。 这样可见的线将只是一个边界。
CSS
.leftspan { padding-right:20px; border-right: 1px solid #ccc; } .row-fluid .rightspan { margin-left: -0.138297872340425%; *margin-left: -0.13191489361702%; padding-left:20px; border-left: 1px solid #ccc; } .row-fluid .rightspan:first-child { margin-left: -0.11063829787234%; *margin-left: -0.104255319148938%; }
HTML
<div class="row-fluid" > <div class="span8 leftspan" > </div> <div class="span4 rightspan" > </div> </div>
试试这对我有用
使用这个，100％保证： –
vr { margin-left: 20px; margin-right: 20px; height: 50px; border: 0; border-left: 1px solid #cccccc; display: inline-block; vertical-align: bottom; }
