时间戳

首页 > 解决方案 > 使用引导程序的 div 之间的 Html css 空间

html - 使用引导程序的 div 之间的 Html css 空间

问题描述

我有一行使用引导程序，我想在每个部分之间添加空间，除了第一个和最后一个孩子。但是，我的代码导致行溢出。

HTML：

            <div class="row">
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
            </div>

CSS：

.section{
    background-color: red;
    margin-left: 5px;
    margin-right: 5px;
}

.section:first-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: green;

}

.section:last-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: blue;

}

输出：

Hello         Hello
Hello

标签： htmlcsstwitter-bootstrap

解决方案

使用 bootstrap V4，您只需使用以下命令即可轻松完成此操作col：

.section {
  background-color: red;
  margin-left: 15px;
  margin-right: 15px;
}

.section:first-of-type {
  margin-left: 0px;
  margin-right: 0px;
  background-color: green;
}

.section:last-of-type {
  margin-left: 0px;
  margin-right: 0px;
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col section">
      hello
    </div>
    <div class="col section">
      hello
    </div>
    <div class="col section">
      hello
    </div>
  </div>
</div>

推荐阅读