Question

从＆＃34; div.in＆＃34;（或使其自动）中删除边距时，它正在进行对齐，但它们之间没有空格。但是，当我制作＆＃34; .col-lg-4：33％＆＃34;在@media中，它正在对齐它们，但同时，它没有按照下一个类定义进行响应（即＆＃34; .col-md-6＆＃34;）。这是代码：

* {
  box-sizing: border-box;
}
div.row {
  width: 100%;
  background-color: red;
}
div.in {
  background-color: white;
  border: 2px solid black;
  margin-left: 2px;
  margin-bottom: 2px;
  float: left;
}
.sub {
  margin-left: 80%;
}
h4 {
  background-color: yellow;
  padding: 15px;
  margin-top: 0px;
}
@media (min-width: 1200px) {
  .col-lg-3,
  .col-lg-4 {
    float: left;
    border: 1px solid;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-3 {
    width: 25%;
  }
}
@media (min-width: 950px) and (max-width: 1199px) {
  .col-md-6 {
    float: left;
    border: 1px solid;
  }
  .col-md-6 {
    width: 50%;
  }
  .coll {
    width: 100%;
  }
}
@media (max-width: 949px) {
  .col-sm {
    float: left;
    border: 1px solid;
  }
  .col-sm {
    width: 100%;
  }
}

<h1>random heading</h1>

<div class="row out">
  <div class=" in col-lg-4 col-md-6 col-sm">
    <div class="sub">
      <h4>sub item 1</h4>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class=" in col-lg-4 col-md-6 col-sm">
    <div class="sub">
      <h4>sub item 2</h4>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class=" in col-lg-4 col-md-6 coll col-sm">
    <div class="sub">
      <h4>sub item 3</h4>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>

</div>

Answer 1

尝试在html页面中添加bootstrap插件，并在下面进行更改。添加此插件后，您不必自己编写响应式媒体col-sm或col-md代码。

    <h1>random heading</h1>

    <div class="row out">   
<div class=" in col-sm-4">
        <div class="sub">
          <h4>sub item 1</h4>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
   </div> 
  <div class=" in col-sm-4">
        <div class="sub">
          <h4>sub item 2</h4>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>   
</div>  
 <div class=" in col-sm-4">
        <div class="sub">
          <h4>sub item 3</h4>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>   
</div>  
<div class="clearfix"></div> 
</div>

通过边距划分对齐和分离

1 个答案: