web-dev-qa-db-ja.com

TwitterのBootstrap 3グリッド、ブレークポイントを変更してパディングを削除

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

  1. グリッドを480px未満で480pxと768pxの間ではなくスタックするにはどうすればよいですか？
  2. 768pxを超えると、最初の左のパディングと最後のパディングの右のパディングはコンテナーの外側にありますが、768px未満の場合、パディングはコンテナーの内側にあります。
  3. グリッドスタックの場合、パディングは残りますが、私にとっては0でなければなりません。

bootstrap 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>
csstwitter-bootstrapresponsive-designlesstwitter-bootstrap-3
10
fred_

2014年1月に更新

参照： https://github.com/twbs/bootstrap/issues/102

2013年8月21日更新Twitter Bootstrap 3 RC2以降、下記のcol- *はxs-col-に名前が変更されました*現在、4つのグリッドクラスがあります：xs-col- *（モバイル、スタックなし）、col-sm- *（タブレット、768px未満のスタック）、col-md- *（ラップトップ、992 px未満のスタック）、col-lg -*（デスクトップ、1200px未満のスタック）。

更新 私の以前の答えでは、最近のドキュメントからこのテーブルを使用します：

[古い画像は削除されました]

別の何かが見つかった場合、この値をテストすると：

Bootstrap 3 Grid

  • 「col-xs- *」は常に適用されます（スタックしない）
  • 「col-sm- *」は、768以上（992px）に適用されます（767でスタック）
  • 「col-lg- *」は992以上に適用されます（991のスタック）

Variables.lessには以下が含まれます。

// Media queries breakpoints
// --------------------------------------------------

// Tiny screen / phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

しかし、480pxにブレークポイントはないようです（または @ fred _ は、グリッドにcol-ts- *（小さいから小さい）セットのクラスが欠落していることを示しています）。参照： https://github.com/twbs/bootstrap/issues/9746

スタッキングポイントを480pxに設定するには、CSSを再コンパイルする必要があります。 @ screen-smallを480pxに設定します。その後、colsを<div style="background-color: red" class="col-sm-4">で定義します。これにより@ grid-float-breakpointが変更され、@grid-float-breakpoint: @screen-tablet;として定義されることにもなります。

コンテナーに行を追加するときに、パディングの問題が見つかりません。

または試してください： http://www.bootply.com/70212 メディアクエリを追加することにより、480px未満でスタックします（JavaScriptは図のみに使用されます）

前の回答

これ以降、TwitterのBootstrapは、電話用の小さなグリッド（<480px）、タブレット用の小さなグリッド（<768px）、およびDestkops用の中規模の大きなグリッド（> 768px）を定義します。行クラスこれらのグリッドの接頭辞は「.col-」、「。col-sm-」、「。col-lg-」です。中〜大のグリッドは画面幅768ピクセル未満でスタックされます。したがって、480ピクセル未満の小グリッドと小さなグリッドがスタックすることはありません。

「col-4」接頭辞を使用すると、グリッドがスタックすることはありません。したがって、「col-4」を削除して、グリッドスタックを480px未満にします。これにより、パディングの原因であるスタックも削除されます。

参照： http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/ および Writing TwitterのBootstrap v3へのアップグレードを念頭に置いて

16
Bass Jobsen

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

    @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
4
otopic

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

例えば：

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

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

0
Daniel West