Question

我正在尝试使用ulst元素的bootstrap进行响应式设计。

我有html喜欢：

<div class="col-lg-8 col-md-7 col-sm-4 col-xs-4">
    <div class='row'>
         <ul>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>
             <li class='item'></li>  
         </ul>
    </div>
</div>

CSS

.item{
    background-color:red;
}

元素看起来很好，宽度

 ---   ---    ---    ---
|   | |   |  |   |  |   |
 ---   ---    ---    ---

但不是较小的宽度

 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --  
 --
|  | 
 --

我希望我的li有更小的宽度，因为它在较小的屏幕上，我希望我的li水平排列。这是你们可以帮助的吗？非常感谢！

Answer 1

ul#my_list{
  width:100%;
}

#my_list li {
   width:300px;
   transition:ease-in-out 300ms all;
   display:inline-block;
   float:left; // dont forget to use a clearfix or similar method on the #my_list element
}


@media (max-width:320){
   #my_list li{
      width:150px;
      display:block;
   }
}

这样的事情应该是你正在寻找的东西，希望我能够提供帮助，如果我没有清楚地解释这个或者是不合适的，请随时告诉我！

Answer 2

您应该尝试使用百分比来进行响应式设计;看看这个例子，如果你在UL上玩宽度那么那个有点代表一个屏幕宽度

JSFiddle

ul {
    width: 500px; /* This could be the screen width (100%) */
    height: 50px;
    border: 2px solid #000;
    margin: 0;
    padding: 0;
}
.item{
    background-color:red;
    margin: 0 1%;
    width: 23%; /* less width to compensate for margin */ 
    height: 100%;
    float: left;
    list-style-type: none;
}

如何为UL elemeet设置响应式设计

2 个答案: