Question

我想制作五列响应式设计，它们之间有15px的余量。在正常屏幕中，它应该填充五个，在平板电脑中它应该是连续2个，如下图所示。

我得到类似this的内容，但它们之间没有15px的余量。

有人有样品吗？

桌面

--------------   --------------   --------------   --------------   --------------
|            |   |            |   |            |   |            |   |            |
|            |   |            |   |            |   |            |   |            |
|     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并将它们视为realcolumns并为它们添加边距

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

<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>

看到这个plunker：http://plnkr.co/edit/XmjkG3msh4pi5DN4N6Nq?p=preview 显示了如何实现这种布局。

CSS中的响应式五列布局

1 个答案: