添加边距使最后一列成为新行

Question

“所以我有下面的代码，我想要添加边距来分隔列，并且不让它们彼此接触。但是，每次我这样做时，最后一列都会在下面创建一个新行。我正在使用Bootstrap。我如何防止这种情况发生？”

<div class="container attributes-div">
        <div class="row attributes">
            <div class="col-xl-4 attribute-center info-1">
                <img class="attribute-pic" src="house2.png">
                <h3>Quality Cleaning</h3>
                <h5>We strive to leave your home spotless! It is always our 
                goal to have your clean at it's best!</h5>
            </div>

        <div class="col-xl-4 attribute-center info-2 middle-attribute-margin">
            <img class="attribute-pic" src="dollarsign2.png">
            <h3>Affordable Rates</h3>
            <h5>We offer REASONABLE RATES that won't hurt your pocket!</h5>
        </div>

        <div class="col-xl-4 attribute-center info-1 info-3">
            <img class="attribute-pic" src="maid.png">
            <h3>Professional Staff</h3>
            <h5>We listen to our customers and make sure to leave each of 
            their homes to their liking. If you aren't satisfied, we aren't 
            satisfied either!</h5>
        </div>
    </div>
</div>

“下面是我的CSS:”

.attributes-div{
margin-top: 200px;
max-width: 90%;
    }


.attribute-pic{
width: 50px;
   }

.attribute-center{
text-align: center;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
  }

.info-1{
background: linear-gradient(70deg,#F0E4F0,#eef2f3,#F0E4F0);
background-repeat: no-repeat;
 }

 .info-2{
background: linear-gradient(70deg,#dfeff5,#eef2f3,#dfeff5);
background-repeat: no-repeat;

Answer 1

在bootstrap中，最大值是12，每个框的值都是4…4*3 = 12 +您的边距使其超过12到下一行。我建议将这些框的值设为3(值的意思类似于col-xl-3)

Answer 2

不能对列使用margin。相反，在列中使用w-100 div，并对其使用margin或padding。

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container attributes-div">
  <div class="row">
    <div class="col-xl-4 ">
      <div class="w-100 px-3 bg-primary">
        <img class="attribute-pic" src="house2.png">
        <h3>Quality Cleaning</h3>
        <h5>We strive to leave your home spotless! It is always our 
          goal to have your clean at it's best!</h5>
      </div>
    </div>

    <div class="col-xl-4 ">
      <div class="w-100 px-3 bg-primary ">
        <img class="attribute-pic" src="dollarsign2.png">
        <h3>Affordable Rates</h3>
        <h5>We offer REASONABLE RATES that won't hurt your pocket!</h5>
      </div>
    </div>

    <div class="col-xl-4">
      <div class="w-100 px-3 bg-primary ">
        <img class="attribute-pic" src="maid.png">
        <h3>Professional Staff</h3>
        <h5>We listen to our customers and make sure to leave each of 
          their homes to their liking. If you aren't satisfied, we aren't 
          satisfied either!</h5>
      </div>
    </div>
  </div>
</div>

​

如果您想要等高列，请对列使用d-flex和flex-columns，对w-100 div使用h-100。

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container attributes-div">
  <div class="row">
    <div class="col-xl-4 d-flex flex-column">
      <div class="w-100 h-100 px-3 bg-primary">
        <img class="attribute-pic" src="house2.png">
        <h3>Quality Cleaning</h3>
        <h5>We strive to leave your home spotless! It is always our goal to have your clean at it's best!</h5>
      </div>
    </div>

    <div class="col-xl-4 d-flex flex-column">
      <div class="w-100 h-100 px-3 bg-primary ">
        <img class="attribute-pic" src="dollarsign2.png">
        <h3>Affordable Rates</h3>
        <h5>We offer REASONABLE RATES that won't hurt your pocket!</h5>
      </div>
    </div>

    <div class="col-xl-4 d-flex flex-column">
      <div class="w-100 h-100 px-3 bg-primary ">
        <img class="attribute-pic" src="maid.png">
        <h3>Professional Staff</h3>
        <h5>We listen to our customers and make sure to leave each of their homes to their liking. If you aren't satisfied, we aren't satisfied either!</h5>
      </div>
    </div>
  </div>
</div>

​

https://codepen.io/anon/pen/Pabpyb