web-dev-qa-db-ja.com

Bootstrap-画面サイズが小さい場合のパディングまたはマージンの削除

編集：画面が480px幅未満に縮小されたときに、どのセレクターがサイドパディングを設定するかを尋ねる必要がありますか？私はしばらくの間、これを見つけるためにbootstrap-responsiveness.cssを参照していましたが、これに影響を与えるものはないようです。

Original基本的に、小さなデバイス画面での応答性のために設定されているデフォルトのパディングまたはマージンを削除します。

background colorセレクターでオーバーライドされたcontainer-fluidセレクターがあり、画面が大きい場合は幅全体で完全に100％レンダリングされますが、画面は小さいサイズに縮小されます。デフォルトでは、Bootstrap container-fluidまたはcontainerにマージンまたはパディングを追加します。

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

カスタムcssを使用してBootstrapのデフォルトスタイルを上書きする場合、小さい画面でこのパディングを削除するには、どのメディアクエリまたはセレクターを上書きする必要がありますか？

csstwitter-bootstrapresponsive-designmedia-queries
72
Seong Lee

「電話」専用の@mediaクエリは..

@media (max-width: 480px) { ... }

ただし、小さい画面サイズのパディング/マージンを削除することもできます。デフォルトでは、Bootstrapは978pxで本体、コンテナ、およびナビゲーションバーのマージン/パディングを調整します。

（ほとんどの場合）私のために働いたいくつかのクエリを次に示します。

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

デモ

Bootstrap 4の更新

新しいレスポンシブ spacing utils を使用すると、さまざまな画面幅（ブレークポイント）のパディング/マージンを設定できます。 https://stackoverflow.com/a/43208888/171456

93
Zim

ここでの問題は、グリッド構造が囲まれた行に負のマージンを適用するときにこのパディングに依存するため、コンテナのパディングを削除するよりもはるかに複雑です。

この場合、コンテナのパディングを削除すると、このコンテナクラス内のすべての行が原因でx軸のオーバーフローが発生します。これは、Bootstrapグリッドに関する最も愚かなことの1つです。

論理的にアプローチする必要があります

  1. 行以外に.containerクラスを使用しないでください
  2. 非グリッドhtmlで使用するパディングのない.containerクラスのクローンを作成します
  3. モバイルで.containerパディングを削除するには、メディアクエリで手動で削除してから、overflow-x: hidden;を削除します。

LESSを使用している場合、最終結果は次のようになります。

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

メディアクエリを、ターゲットにするサイズに変更します。

最後に、より高度な方法として Foundation Framework Gridを使用することを強くお勧めします

17
Zyad Sherif

このスレッドは、私の特定のケース（ブートストラップ3）で解決策を見つけるのに役立ちました

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}
8
Mike Dorsey

このような問題を解決するために、私はCSSを使用しています-最速で最も簡単な方法です...ニーズに合わせて変更してください...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}
7
Paulius Marčiukaitis

デバイスの幅が100％になるように要素を取得する方法は、デバイスに負の左マージンと右マージンを使用することです。本文には24pxのパディングがあるため、次の場合に負のマージンを使用できます。

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}
3
Dan Gayle

PauliusMarčiukaitisによるCSSは、私の創世記のテーマにうまく機能しました。要件に合わせてさらに変更したのは次のとおりです。

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

1
Swagatam Majumdar

同様のフォーマットとコードを使用しているサイトでこの問題が発生しました。サイトの一部が機能し、一部が機能しなかった詳細が不明であることに頭を悩ませました。

Bootstrap 3の場合：私にとっての答えは、.container-fluid、.row、またはマージンのリセットのためにcssを書き換えることではなく、一貫したパターンは長い単語が途切れていたデザインとマージンの作成。

ソリューションの手順：

  1. コンテナを含むセクションを一時的に削除してページをテストし、小さなブラウザでサイトをテストします。これにより、問題のコンテナが特定されます。

  2. Divのフォーマットに問題がある可能性があります。もしそうなら、それを修正してください。すべてが順調であれば：

  3. ラッピングされていない長い単語を使用したかどうかを確認します。 Wordを変更できない場合（タグラインやスローガンなど）

解決策1：画面を小さくするためにメディアクエリでフォントを小さいサイズにフォーマットします（通常、@ media（max-width：767px）で十分です）。

または：

解決策2：

@media (max-width: 767px){

h1, h2, h3 {Word-wrap: break-Word;}
}
1
Kim McCann
.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}
0
Indrajeet Yadav

マージンの問題を引き起こす可能性のあるもう1つのCSSは、CSSにdirection:someValueがあるため、初期値に設定して削除するだけです。

例えば：

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}
0
Richard Socker

Bootstrap 3/4に対して私が行うこと

コンテナの代わりにcontainer-fluidを使用します。

これをCSSに追加します

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

これにより、幅1400ピクセル以下の画面の余白が削除されます

0
Ryan NZ