Question

我有3个包裹在容器中的物品。我为它们添加了背景色和填充。

现在，当我要在它们之间添加一些边距时，它将移至下一行。

.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
  //margin-right: 10px; Shifts line to next row.
}

JsFiddle

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container marketing">
<div class="row">
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

Answer 1

您需要稍微更改一下结构，此处已更新fiddle

<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>

和少量利润

.col-lg-4 .div-category{
  margin: 0 20px;
}

它应该工作

@import url('http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}
.col-lg-4 .div-category{
  margin: 0 20px;
}

     <div class="container marketing">
<div class="row">
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
            </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

Answer 2

然后在其中再添加一个div并将margin应用于该.inside-margin类

<div class="col-lg-4 col-md-4 col-sm-4 div-category">
<div class="inside-margin">

</div>
</div>

.inside-margin{ margin:0 5px; }

Answer 3

这是因为您已经利用了12列网格，然后又尝试应用页边距，并且因为屏幕的整个空间都被12列利用了，所以它缺少空间并换行到新行。

您可以将 col-lg-4 更改为 col-lg-3 ，然后尝试提供边距。

如何在不推到下一行的情况下在侧容器中的元素之间添加边距

3 个答案: