ブートストラップ-画面サイズが小さい場合のパディングまたはマージンの削除

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

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

私がしているbackground colorに上書きcontainer-fluidセレクタと大画面のために、彼らは幅にわたって完全に100％をレンダリングするが、それらの画面が小さいサイズに縮小され、デフォルトでは、ブートストラップは、上のマージンやパディングを追加しているようですcontainer-fluidかcontainer。

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

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

'phones'専用の@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;
    }
}

デモ

Bootstrap4の更新

さまざまな画面幅（ブレークポイント）にパディング/マージンを設定できる新しいレスポンシブスペーシングユーティリティを使用してください：https： //stackoverflow.com/a/43208888/171456

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

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

論理的には、

1. .container行以外にクラスを使用しないでください
2. .container非グリッドHTMLで使用するためのパディングのないクラスのクローンを作成します
3. 除去するために.container、モバイル上のパディングを手動でその後、メディアクエリでそれを削除することができoverflow-x: hidden;、非常に信頼性がありませんが、ほとんどの場合で動作します。

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

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

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

最終的な考えFoundation Frameworkとして、グリッドをより高度な方法として使用することを強くお勧めします

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

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

このような問題を解決するために、私は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;}
}

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

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

Bootstrap 4では、最初のコンテナの15pxのマージンが、すべての行と列にカスケードされます。だから、このようなものは私のために働きます...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

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

Bootstrap 3の場合：私にとっての答えは、.container-fluid、.row、またはマージンのリセットのcssを書き直すことではありませんでした。一貫したパターンは、長い単語の長さがデザインから外れてマージンを作成することでした。

解決手順：

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

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

3. 折り返しのない長い単語を使用したかどうかを確認します。単語を変更できない場合（キャッチフレーズやスローガンなど）

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

または：

解決策2：解決策2：

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

PauliusMarčiukaitisによるCSSは、私のGenesisテーマでうまく機能しました。これが、私の要件に合わせてさらに変更した方法です。

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

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Bootstrap3 / 4に対して私が行うことは次のとおりです

コンテナの代わりにコンテナ流体を使用します。

これをCSSに追加します

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

これにより、1400px幅の画面より下の余白が削除されます

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

例えば：

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

簡単な解決策は、そのようなものを書くことです、

px-lg-1

mb-lg-5

lgを追加すると、クラスは大画面にのみ適用されます