10

新しいブーストラップ 3 グリッドに移行しようとしていますが、いくつかの問題に直面しています。

  1. グリッドを 480px 未満にスタックするが、480px と 768px の間にはスタックしないようにするにはどうすればよいですか?
  2. 768px より上では、最初のパディングの左と最後のパディングの右はコンテナの外側にありますが、768px より下ではパディングがコンテナの内側にあるため、コンテンツが上にある可能性のあるコンテナと整列していないため、外観が異なります。
  3. グリッドスタックがパディングのままになると、私には0になるはずです。

どんな助けでも大歓迎です私はブートストラップ3 RC1で以下のコードを使用しています

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>
4

3 に答える 3

4
  1. 480px 未満.col-ts-12のすべての 100% に対してクラスを使用し、次のコードを bootstrap.css の最後に配置します。divs

    @media (max-width: 480px) { 
        .col-ts-12 { float: none; }
    }
    
于 2013-10-24T13:11:00.940 に答える
0

小型から小型のデバイスに変更を実装するには、独自のメディア クエリを含めて独自のブレークポイントを追加する必要があります。

例えば:

@media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

これで何を達成しようとしているのかよくわかりませんが、これは画面幅が 480px 未満のスタイルを適用する方法です。

于 2014-01-10T23:04:24.003 に答える