引导程序为列增加边距 [英] Bootstrap add margin to column

问题描述

这可能很简单，但是我的脑子正试图解决这个问题。花了一个小时左右的时间进行搜索，但仍然无法正常工作。

This is probably very simple, but my mind is getting tangled with trying to work this out. Spent an hour or so searching this up and it still isn't working.

我的HTML代码...

My HTML code...

<div class="section-container light-bg">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2 style="text-align:center;">Main Title Right Here</h2>
            <h4 style="text-align:center;">Slogan text underneath</h4>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
        <div class="col-md-3 light-panel">
            <h3>TITLE</h3>
            <p>TEXT</p>
        </div>
    </div>
</div>

CSS

.section-container.light-bg {
    background-color: #F5F5F5;
    color: #444444;
}

.section-container .light-panel {
    background-color: #ffffff;
    border-radius:10px;
}

当前正在创建一行，其中4列的样式略有不同。

This is currently creating a row with 4 columns that are styled slightly.

对于使用Bootstrap 3正确执行此操作的任何帮助或解释，将不胜感激：）

Any help or explanation of how to correctly do this using Bootstrap 3 would be greatly appreciated :)

推荐答案

演示小提琴

The最好的方法是添加一个内部容器，然后在列上填充。

Demo Fiddle

The best approach is to add an inner container, then padding on the columns. This ensures Bootstraps functionality remains as intended.

HTML

<div class="section-container light-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                 <h2 style="text-align:center;">Main Title Right Here</h2>

                 <h4 style="text-align:center;">Slogan text underneath</h4>

            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                     <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
            <div class="col-md-3 light-panel">
                <div class='inner'>
                    <h3>TITLE</h3>

                    <p>TEXT</p>
                </div>
            </div>
        </div>
    </div>

CSS

 .section-container.light-bg {
    background-color: #F5F5F5;
    color: #444444;
}
.inner {
    background-color: #ffffff;
    border-radius:10px;
    padding:10px;
}
.col-md-3 {
    padding:10px;
}

---

或者

您可以使用计算出的宽度/边距。，无需更改HTML。

---

Alternatively

You can use calculated width/margins., no change to your HTML necessary.

例如 col-md-3 的宽度为100/4 = 25％。因此，您可以将其减少到20％，然后将剩余的5％分配给您的利润。

E.g. the width of col-md-3 is 100/4=25%. Therefore you can reduce this, say to 20%, and allocate the remaing 5% to your margins.

.col-md-3 {
    width:20%;
    margin:0 2.5%;
}

这篇关于引导程序为列增加边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！