web-dev-qa-db-ja.com

Bootstrap 3モバイルビューのみにCSSを適用

私はBootstrap= 3を使用しています。モバイルビューでは、モバイルビューのいくつかのバグを修正するためにCSSを適用したいと思います。ドキュメントとGoogleを参照しました。何か手掛かりが見つかるようです。

出来ますか？

csstwitter-bootstrapresponsive-design
32
Navneil Naicker

CSSで適切なメディアクエリを使用するだけです。たとえば、

@media (max-width: 767px) {
    /* CSS goes here */
}

ブートストラップは次の幅を定義します

  • 超小型デバイス（電話、768px未満）
  • 小型デバイス（タブレット、768px以上）
  • 中型デバイス（デスクトップ、992px以上）
  • 大型デバイス（大型デスクトップ、1200ピクセル以上）

メディアクエリの詳細については、 http://css-tricks.com/css-media-queries/ を参照してください。

69
Phil

レスポンシブユーティリティもあり、特定のビューポートサイズで表示または非表示にするために、特定の要素にクラスを追加できます。

.hidden-xs or .visible-xs

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

16
unclejam

レスポンシブディスプレイクラスを使用できます https://getbootstrap.com/docs/4.3/utilities/display/ in Bootstrap 4

そのため、たとえば、特定の要素を電話のみ（ポートレートモードとランドスケープモードまたはxsとsmの両方​​）で非表示にするには、次のようにします。

<div class="big_image d-none d-md-block">
</div>

設定されるのはdisplay:noneはデフォルトで、md以上からのみ表示されます。

3
RameshVel