Bootstrap 3在单一尺码内的多 | 列不能正常浮动[英] Bootstrap 3 Multi-column within a single ul not floating properly

本文是小编为大家收集整理的关于Bootstrap 3在单一尺码内的多 | 列不能正常浮动的处理方法,想解了Bootstrap 3在单一尺码内的多 | 列不能正常浮动的问题怎么解决?Bootstrap 3在单一尺码内的多 | 列不能正常浮动问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我已经在当前的Bootstrap 3上遇到了这样的问题.我过去设法以一种或另一种方式修复它们,但这次不知道如何修复它.

我需要通过在列表项目上交替pull-left&pull-right来创建一个ul中的两列.我在做什么错?

http://bootply.com/92446

推荐答案

您应该尝试使用 grid template .

这是我用于A <ul>

的两列布局
<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

这对我有用.

其他推荐答案

谢谢,Varun Rathore.它可以很好地工作!

对于那些想要优雅崩溃的人,根据屏幕宽度, :

<ul class="list-group row">
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_1</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_2</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_3</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_4</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_5</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_6</li>
    <li class="list-group-item col-xs-6 col-sm-4 col-md-3">Cell_7</li>
</ul>

其他推荐答案

您在想太多...看看这个[我认为这是您想要的 - 如果不让我知道]

http://www.bootply.com/118886

CSS

.even{background: red; color:white;}
.odd{background: darkred; color:white;}

html

<div class="container">
  <ul class="list-unstyled">
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 even">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
    <li class="col-md-6 odd">Dumby Content</li>
  </ul>
</div>

本文地址:https://www.itbaoku.cn/post/583384.html