30

私は最初の Bootstrap プロジェクトに取り組んでおり、少し行き詰まっています。ページの上部で、左側にロゴ、右側に 2 つのボタンを重ねて配置します。これは私がこれまでに持っているものです:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span8">
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>    
    </div>
  </div>
</div>

デスクトップでは期待どおりに動作しますが、iPhone では、span8 列が壊れて次の行に表示されます。これをオーバーライドする方法はありますか?

4

3 に答える 3

23

これは、レスポンシブ グリッドの予期される動作です。画面のサイズを変更すると、ブートストラップ ドキュメント ページ (特にscaffoldingデモ)で同じ効果が発生することがわかります。これを克服するには、独自のクラスを作成spanして、モバイル デバイスで並べて保持したいタグ内に含めます。さらに、画面サイズのモバイル デバイスでトリガーされるメディア クエリにそれをラップすることで、それを補うことができます。 480 ピクセル以下 (別名、iPhone) の場合、この方法では、その制約に達するまでデスクトップのレスポンシブ グリッドに影響を与えません。

CSS

@media all and (max-width: 480px)  {
    .half {
        float: left !important;
        width: 50% !important;
    }
}

デモ、モバイル デバイスでこのデモを表示してみてください ( http://jsfiddle.net/r5VCy/1/show/ ) 。

于 2012-04-24T23:10:09.047 に答える
7

Bootstrap 3のメモに追加したいだけです。列の折り返しが早すぎて、幅が十分に長くならないという同じ問題がありました(「スターターテンプレート」の例では「col-lg-6」)。「col-sm-6」に変更するとうまくいきました。各サイズのリファレンスは次のとおりです。

http://getbootstrap.com/css/#responsive-utilities

于 2013-12-12T00:02:57.627 に答える