[解決済み] Bootstrap - 画面サイズが小さいときにパディングやマージンを削除する

質問

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

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

私は background color にオーバーライドされた container-fluid をオーバーライドすると、大きな画面では横幅100%で完璧にレンダリングされますが、小さな画面では縮小されます。 デフォルトでは、Bootstrapはマージンまたはパディングを container-fluid または container .

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

BootstrapのデフォルトスタイルをカスタムCSSで上書きする場合、小さい画面でこのパディングを削除するには、どのメディアクエリまたはセレクタに上書きすればよいでしょうか。

どのように解決するのですか？

電話」に特化した@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 用のアップデート

新しいレスポンシブな スペーシングユーティル を使うことで、異なる画面幅（ブレイクポイント）に対してパディング／マージンを設定することができます。 https://stackoverflow.com/a/43208888/171456