twitter bootstrap grid system. Spacing between columns
I'm sure there is a simple solution to this problem. Basically, if I have two columns how can I add a space between them?
eg if the html is :
<div class="col-md-6"></div>
<div class="col-md-6"></div>
The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.
If I wanted a 100px space between the two how could I achieve this? Obviously automatically through bootstrap the div sizes would become 450px each to compensate for the space
You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
I know I'm late to the party, but you could try spacing the boxes with padding.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Have a go at it
链接地址: http://www.djcxy.com/p/94724.html上一篇: 如何减少表格html中td之间的空间？