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

您可以在col

中添加col来解决此问题

<div class="row">
   <div class="col-sm-4">
       <div class="col-11">
       ...
       </div>
   </div>
   <div class="col-sm-4">
       <div class="col-11">
       ...
       </div>
   </div>
   <div class="col-sm-4">
       <div class="col-11">
       ...
       </div>
   </div>
</div>

Answer 3

您不得将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作为列，h-100作为w-100 div。

<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

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

3 个答案: