twitter引导网格系统。 列之间的间距
我确定这个问题有一个简单的解决scheme。 基本上如果我有两列，我怎么能在他们之间增加一个空间。
例如，如果html是：
<div class="col-md-6"></div> <div class="col-md-6"></div> 输出结果只是两列紧挨在一起，占据整个页面的宽度。 说宽度设置为1000px那么每个div将是500px宽。
如果我想要两个100px之间的空间，我怎么能实现这个？ 显然自动通过自举div 450px将成为每个450px以弥补空间
您可以使用col-md-offset-*类实现列之间的间距，这里logging 。 间距是一致的，以便您的所有列正确排列。 要获得均匀的间距和列大小，我会做以下几点：
<div class="row"> <div class="col-md-5"></div> <div class="col-md-5 col-md-offset-2"></div> </div>
我面临同样的问题; 下面的工作对我很好。 希望这有助于在这里登陆的人：
<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>
这会自动在2个div之间渲染一些空间。
我知道我迟到了，但是你可以尝试用填充来填充这些框。
<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; }
去一下吧
这将允许两列之间的空间，显然如果你想改变默认的宽度，你可以去mixin修改默认引导宽度。 或者，你可以使用内联的CSS样式来给出宽度。 select完全是你的！
<div class="col-md-5 pull-left"></div> <div class="col-md-5 pull-right"></div>
干杯！！！
使用bootstraps
.form-group
类。 就像你的情况一样：
<div class="col-md-6 form-group"></div> <div class="col-md-6 form-group"></div>
您可以使用col-xs- *类实现列之间的间距，在下面编码的col-xs- * div内。 间距是一致的，以便您的所有列正确排列。 要获得均匀的间距和列大小，我会做以下几点：
<div class="container"> <div class="col-md-3 "> <div class="col-md-12 well"> Some Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> <div class="col-md-3 "> <div class="col-md-12 well"> Some Second Content.. </div> </div> </div>
我在列之间的空间有类似的问题。 根本问题是引导程序3和4中的列使用填充而不是边距。 所以两个相邻列的背景颜色相互接触。
我发现了一个适合我们的问题的解决scheme，很可能适用于大多数人尝试空间列，并保持与网格系统的其余部分相同的排水沟宽度。
这是我们要做的最终结果
与列之间的阴影存在差距是有问题的。 我们不希望列之间有额外的空间。 我们只是希望排水沟是“透明”的，所以网站的背景颜色将出现在两个白色的列之间。
这是两列的标记
<div class="row"> <div class="col-sm-7"> <div class="raised-block"> <h3>Facebook</h3> </div> </div> <div class="col-sm-5"> <div class="raised-block"> <h3>Tweets</h3> </div> </div> </div>
CSS
.raised-block { background-color: #fff; margin-bottom: 10px; margin-left: 0; margin-right: -0.625rem; // for us 0.625rem == 10px padding-left: 0.625rem; padding-right: 0.625rem; } @media (max-width: 33.9em){ // this is for our mobile layout where columns stack .raised-block { margin-left: -0.625rem; } } .row [class^="col-"]:first-child>.raised-block { // this is so the first column has no margin so it will not be "indented" margin-left: -0.625rem; }
这种方法确实需要一个带有负边界的内部div，就像“行”类引导使用的一样。 而这个div，我们称之为“提升块”，一定是一列的直接兄弟
这样你仍然可以在你的列中得到适当的填充。 我已经看到似乎通过创build空间工作的解决scheme，但不幸的是，他们创build的列在行的任何一侧都有额外的填充，所以最终使得行更细化，网格布局的devise。 如果你看图像的期望的外观，这将意味着两列合在一起将小于顶部的一个较大的打破了网格的自然结构。
这种方法的主要缺点是它需要额外的标记来包装每一列的内容。 对我们来说这是可行的，因为只有特定的列需要在它们之间的空间来达到所需的外观
希望这可以帮助
你可以使用具有边界特性的背景剪辑和框模型
.box{ box-model: border-box; border: 3px solid transparent; background-clip:padding-box; }
<div class="row"> <div class="col-xs-4 box"></div> <div class="col-xs-4 box"></div> <div class="col-xs-4 box"></div> </div>
我必须弄清楚如何为3列做这个。 我想绕圆angular的angular落，不能间隔工作。 我用了利润。 在我的情况下，我认为屏幕的90％由divs填充，10％用于margin：
HTML：
<div class="row"> <div id="orange" class="col-md-4"> <h1>Orange Div</h1> </div> <div id="green" class="col-md-4"> <h1>Green Div</h1> </div> <div id="aqua" class="col-md-4"> <h1>Aqua Div</h1> </div> </div>
和CSS：
#orange { background-color:orange; border-radius: 30px; padding: 20px; margin: 2.5% 2.5% 0 2.5%; width:30%; } #green { background-color:green; border-radius: 30px; padding: 20px; margin: 2.5% 0 0 0; width:30%; } #aqua { background-color:#39F; border-radius: 30px; padding: 20px; margin: 2.5% 2.5% 0 2.5%; width: 30%; }
为了使它正确的移动设备的大小，我有CSS的宽度从30％改为width:92.5%; 在@media (max-width:1023px)
引导4 ，文件custom.scss你可以添加下面的代码：
$grid-gutter-width-base: 20px; $grid-gutter-widths: ( xs: $grid-gutter-width-base, sm: $grid-gutter-width-base, md: $grid-gutter-width-base, lg: $grid-gutter-width-base, xl: $grid-gutter-width-base );
默认$ grid-gutter-width-base：30px;
如何使用CSS添加与背景相同颜色的边框？ 我是新来的，所以也许有一个很好的理由，但是当我尝试它的时候看起来不错。
<div class="col-md-12 no_padding header_row"></div> <div class="second_row"> <div class="col-md-4 box_shadow"></div> <div class="col-md-8 no_padding_right"> <div class="col-md-12 box_shadow"></div> </div> </div> body{ background:#F0F0F0; } .main_holder{ min-height: 600px; margin-top: 40px; height: 600px; } .box_shadow{ box-shadow: 0 1px 2px rgba(0,0,0,.1); background: white; height: auto; min-height: 500px; } .no_padding{ padding: 0px !important; } .no_padding_right{ padding-right: 0px !important; } .header_row{ height: 60px; background: #00796B; -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); } .second_row{ position: relative; width: 100% !important; top: 20px; }
这很简单..你必须添加坚实的边界权利，左col- *，它应该是工作.. 🙂
它看起来像这样： http : CF5ZV.png
HTML：
<div class="row"> <div class="col-sm-3" id="services_block"> </div> <div class="col-sm-3" id="services_block"> </div> <div class="col-sm-3" id="services_block"> </div> <div class="col-sm-3" id="services_block"> </div> </div>
CSS：
div#services_block { height: 355px; background-color: #33363a; border-left:3px solid white; border-right:3px solid white; }
要获得列之间的特定宽度的间距，我们必须在标准Bootstrap的布局中设置padding 。
@import url('ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css'); /* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */ @media (min-width: 992px) { .space-100-px > .row > .col-md-6:first-child { padding: 0 50px 0 0; /* The first half of 100px */ } .space-100-px > .row > .col-md-6:last-child { padding: 0 0 0 50px; /* The second half of 100px */ } } /* The result will be easier to see. */ .space-100-px img { width: 100%; height: auto; }
<div class="container-fluid space-100-px"> <div class="row"> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Left" alt="Left"> </div> <div class="col-md-6"> <img src="http://placehold.it/450x100?text=Right" alt="Right"> </div> </div> </div>
这将是有用的..
.list-item{ margin-right:-10px; margin-top:10px; margin-bottom: 10px; border: 1px solid #eee; padding: 0px; }
<div class="col-md-4"> <div class="list-item"> <h2>Your name</h2> </div> </div> <div class="col-md-4"> <div class="list-item"></div> </div>
在col-md-？里面，创build另一个div并把图片放在div里，比你可以很容易地添加填充。
<div class="row"> <div class="col-md-8"> <div class="thumbnail"> <img src="#"/> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="#"/> </div> </div> </div> <style> thumbnail{ padding:4px; } </style>
包裹元素周围只是白色的边框
.padding-pls{ border-left: 13px solid white; border-right: 13px solid white; } .row .col-md-6:first-child>.padding-pls { border-left: 0px solid white; } .row .col-md-6:last-child>.padding-pls { border-right: 0px solid white; }
和第一个+最后一个孩子没有边界
<div class="row"> <div class="col-md-6"> <div class="col-md-12 padding-pls"> Keci </div> </div> <div class="col-md-6"> <div class="col-md-12 padding-pls"> Keci </div> </div> </div>
<div class="col-md-6"> <div class="inner"> <!-- Put the col-6 elements in the inner div --> </div> </div>
这默认情况下提供了一些你需要的外部div内的填充。 此外，您也可以使用自定义CSS修改填充。
