html – Bootstrap向列添加边距

发布时间：2020-12-14 18:45:52 所属栏目：资源来源：网络整理

导读：这可能非常简单,但我的想法正在努力解决这个问题.花了一个小时左右搜索它仍然无法正常工作. 我的HTML代码…… div class="section-container light-bg"div class="container" div class="row" div class="col-md-12" h2 style="text-align:center;"Main Titl

这可能非常简单,但我的想法正在努力解决这个问题.花了一个小时左右搜索它仍然无法正常工作.

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

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

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

这当前正在创建一个包含4列的行,这些列略有样式.

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

解决方法

Demo Fiddle

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

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;
}

Alternatively

您可以使用计算的宽度/边距.,不需要更改您的HTML.

例如. col-md-3的宽度为100/4 = 25％.因此,您可以将此值减少到20％,并将剩余的5％分配给您的边距.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!