Html Bootstrap 向列添加边距

Bootstrap add margin to column

提问by user282076

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.

这可能很简单，但我的思绪正纠结于试图解决这个问题。花了一个小时左右的时间搜索它，它仍然无法正常工作。

My HTML code...

我的 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">
            <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

CSS

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

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

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

这当前正在创建一个具有 4 列样式的行。

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

任何有关如何使用 Bootstrap 3 正确执行此操作的帮助或解释将不胜感激:)

回答by SW4

Demo Fiddle

演示小提琴

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

最好的方法是添加一个内部容器，然后在列上填充。这可确保 Bootstraps 功能保持原样。

HTML

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

CSS

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

---

---

Alternatively

或者

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

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

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

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

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

回答by krishna kinnera

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">
      Set room heater temperature
    </div>
</div>
<div class="col-md-6">
  <div class="col-md-12">
    Set room heater temperature
  </div>
 </div>
</div>

This will automatically render some space between the 2 divs.

这将自动渲染 2 个 div 之间的一些空间。