css - How to put a vertical separator in the middle of span4? -
i'm using twitter-bootstrap framework , i'm trying put vertical separator between 3 span4.
so coded this
to see result more clear if enter here
css
.span4 { border-right: 2px solid red; background: grey; text-align: center; height: 400px; color: white; } .span4:last-child { border-right: none; } html
<div class="container"> <div class="row-fluid"> <div class="span4">hello</div> <div class="span4">stack</div> <div class="span4">overflow</div> </div> </div> as can see border @ end of span, not in middle of them... have line different length span4 , vertical centered.
any advice or tip appreciated.
if need more info, let me know , i'll edit post.
you'd need fiddle bootstrap margins. default bootstrap style adds margin-left of 20px [class*="span"] elements, meaning display is:
[margin][element] [margin][element] [margin][element] in order border directly between margins you'll need bit hacky , introduce new divider between .span4 , content within.
<div class="span4"> <div class="inner"> hello </div> </div> <div class="span4"> <div class="inner"> stack </div> </div> .row-fluid .span4 { border-right: 2px solid red; height: 400px; margin:0; } .span4:last-child { border-right: none; } .inner { margin:0 10px 0 10px; text-align: center; color: white; background: grey; height:100%; } here rough mock up: http://jsfiddle.net/v6qgm/5/
Comments
Post a Comment