Bootstrap 网格边距 [英] Bootstrap grid margin

查看：51
本文介绍了Bootstrap 网格边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我这里有一个 jsfiddle:http://jsfiddle.net/nH5WP/

这是一个使用 Bootstrap 3 的超级简单的 3 x 3 网格

我想在每个块的右侧和底部添加边距.

每行中的最后一个块正在下降，我通常会删除每行中最后一个块的右边距

.box:last-child{背景:黄色；边距:0 0 10px 0；}

但这似乎不起作用.

如何在此网格中的每个块之间添加边距?

<div class="row"><div class="col-xs-4 box"><p>一个</p>
<div class="col-xs-4 box"><p>两个</p>

<div class="col-xs-4 box"><p>三</p>

<div class="row"><div class="col-xs-4 box"><p>四</p>

<div class="col-xs-4 box"><p>五</p>

<div class="col-xs-4 box"><p>六个</p>

<div class="row"><div class="col-xs-4 box"><p>七</p>

<div class="col-xs-4 box"><p>八</p>

<div class="col-xs-4 box"><p>九</p>

解决方案

您不能使用 margin: 在引导网格系统中创建装订线".

Bootstrap 使用填充来构建装订线，因此您需要在列周围放置一个包装 div 并填充它.

请参阅如何在 Bootstrap 3 网格系统中调整装订线?了解更多信息.

I have a jsfiddle here: http://jsfiddle.net/nH5WP/

It's a super simple 3 x 3 grid using Bootstrap 3

I want to add margins to the right and bottom of each block.

The last block in each line is dropping down, I would normally remove the right margin on the last block in each line with something like

.box:last-child{
  background: yellow;
  margin: 0 0 10px 0;
}

but this doesn't seem to work.

How can I add margins between each block in this grid ?

<div class="container">

    <div class="row">
        <div class="col-xs-4 box">
            <p>One</p>
        </div>
        <div class="col-xs-4 box">
            <p>Two</p>
        </div>
        <div class="col-xs-4 box">
            <p>Three</p>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4 box">
            <p>Four</p>
        </div>
        <div class="col-xs-4 box">
            <p>Five</p>
        </div>
        <div class="col-xs-4 box">
            <p>Six</p>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4 box">
            <p>Seven</p>
        </div>
        <div class="col-xs-4 box">
            <p>Eight</p>
        </div>
        <div class="col-xs-4 box">
            <p>Nine</p>
        </div>
    </div>

</div>

解决方案

You can't create a "gutter" in the bootstrap grid system using margin:.

Bootstrap uses padding to build gutters, so you need to put a wrapper div around your columns and pads that.

See How to adjust gutter in Bootstrap 3 grid system? for more information.

这篇关于Bootstrap 网格边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆