web-dev-qa-db-ja.com

Bootstrap 3 1つのul内の複数列が適切にフローティングしていない

しばらくの間、現在のbootstrap 3でこのような問題に遭遇しています。私は過去に何らかの方法でそれらを修正することができましたが、今回はそれを修正する方法の手がかりがありません。

リストアイテムでpull-leftとpull-rightを交互に使用して、1つのulから2つの列を作成する必要があります。私は何を間違えていますか？

http://bootply.com/92446

listcss-floattwitter-bootstrap-3multiple-columns
43
davidetucci

Grid Template を使用してみてください。

<ul>の2列レイアウトに使用したものは次のとおりです。

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

これは私のために働いた。

145
Varun Rathore

ありがとう、Varun Rathore。完璧に機能します！

画面の幅 に応じて、行ごとに4個のアイテムから行ごとに2個のアイテムに優雅に折りたたむ場合

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

あなたは考えすぎています...これを見てみましょう

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