html - CSS中的响应式五列布局

Question

我想制作五列响应式设计，它们之间的边距为 15 像素。在正常屏幕中它应该填满五个，在平板电脑中它应该是连续 2 个，如下图所示。

我得到了类似 this 的东西但它不适用于它们之间的 15px 边距。

有人有 sample 吗？

桌面

--------------   --------------   --------------   --------------   --------------
|            |   |            |   |            |   |            |   |            |
|            |   |            |   |            |   |            |   |            |
|     1      |   |      2     |   |      3     |   |      4     |   |      5     |
|            |   |            |   |            |   |            |   |            |
|            |   |            |   |            |   |            |   |            |
--------------   --------------   --------------   --------------   --------------

平板电脑

--------------   --------------   
|            |   |            |   
|            |   |            |   
|     1      |   |      2     |   
|            |   |            |   
|            |   |            |   
--------------   --------------  

--------------   --------------   
|            |   |            |   
|            |   |            |   
|     3      |   |      4     |   
|            |   |            |   
|            |   |            |  
--------------   --------------  

--------------      
|            |   
|            |     
|     5      |   
|            |    
|            |    
-------------- 

移动

--------------      
|            |   
|            |     
|     1      |   
|            |    
|            |    
-------------- 

--------------      
|            |   
|            |     
|     2      |   
|            |    
|            |    
-------------- 

--------------      
|            |   
|            |     
|     3      |   
|            |    
|            |    
-------------- 

--------------      
|            |   
|            |     
|     4      |   
|            |    
|            |    
-------------- 

--------------      
|            |   
|            |     
|     5      |   
|            |    
|            |    
--------------

Answer 1

您可以轻松地创建五列布局，我创建了一个小的 css 文件，使您能够创建 5、8 和 10 等大小的列布局。 HERE

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

然后您可以将其用作:

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

---

现在，当您想要 lg 连续 5 行、md-sm 连续 2 行和 xs 连续 1 的布局时，您可以创建这样的布局:

  <div class="row">
    <div class="col-lg-15 col-sm-6 "></div>
     <div class="col-lg-15 col-sm-6"></div>
     <div class="col-lg-15 col-sm-6"></div>
     <div class="col-lg-15 col-sm-6"></div>
     <div class="col-lg-15 col-sm-6"></div>
</div>

现在这很好，但是您面临的问题是当您在它们之间添加 15px 边距时。

---

为了解决这个问题，您可以在列中插入 div 并将它们视为真实的列并为其添加边距

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-15 {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}
.realColumn {
  height: 50px;
  background: red;
  margin: 15px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-15 col-sm-6 ">
    <div class='realColumn'></div>
  </div>
  <div class="col-lg-15 col-sm-6">
    <div class='realColumn'></div>
  </div>
  <div class="col-lg-15 col-sm-6">
    <div class='realColumn'></div>
  </div>
  <div class="col-lg-15 col-sm-6">
    <div class='realColumn'></div>
  </div>
  <div class="col-lg-15 col-sm-6">
    <div class='realColumn'></div>
  </div>
</div>

.

<div class="row">
    <div class="col-lg-15 col-sm-6 "><div class='realColumn'></div></div>
     <div class="col-lg-15 col-sm-6"><div class='realColumn'></div></div>
     <div class="col-lg-15 col-sm-6"><div class='realColumn'></div></div>
     <div class="col-lg-15 col-sm-6"><div class='realColumn'></div></div>
     <div class="col-lg-15 col-sm-6"><div class='realColumn'></div></div>
</div>

查看这个插件:http://plnkr.co/edit/XmjkG3msh4pi5DN4N6Nq?p=preview展示了如何实现这种布局。