1

Boostrapで「モバイルのみ」の列を作成することは可能ですか？つまり、小さい画面では4行が2行になります（3*span4が2*span6になりますか？）。を追加することで、モバイルの要素を非表示にできることを知っています.hidden-phone。

Zurb Foundationにはphone-two、これを行うクラスなどがあります。http://www.zurb.com/article/859/fancy-mobile-layouts-with-the-foundation-

これを行うには、独自のメディアクエリを作成する必要がありますか？

4

2 に答える 2

2

Bootstrapには、あなたが求めているクラスに相当するものが組み込まれていません。

自分で書きたい場合は、次のアイデアを参考にしてください。http: //jsfiddle.net/panchroma/g6PRS/

CSS

@media (max-width: 767px) {
  .row-fluid.phone-two .span3 {
    width: 48%;
    margin-left: 4%;
    float:left;
  }

  .row-fluid.phone-two > .span3:nth-child(odd){
    margin-left: 0;
  }
}

HTML

<div class="container">
  <div class="row-fluid phone-two">
    <div class="span3">
      span3
    </div>
    <div class="span3">
      span3
    </div>
    <div class="span3">
      phone-two span3
    </div>
    <div class="span3">
      span3
    </div>
  </div>
</div>

これがあなたを動かすのに十分であることを願っています！

于 2013-03-25T15:43:36.253 に答える
1

クイックアップデートブートストラップ3は、ここでやりたいことをサポートするようになりました。

例えば

<div class='row'>
   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>

   <div class='col-xs-3 col-md-6'>
   </div>
</div>

Haventはこれをテストしましたが、動作するはずです。モバイルでは2列、デスクトップでは4列を表示する必要があります。詳細情報http://getbootstrap.com/css/#grid

于 2013-12-11T08:59:34.483 に答える