Bootstrapでのcssについて

Question

現状

画像の

.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

paddingの部分の適用を外したいのですが、外し方がわからない状態でございます。

該当のソースコード

    //devise関連のページのみ最大の横幅を576pxとして、それ以外は別の横幅にする
    //条件分岐で付与するクラスを付け替え
    %div{:class => "container-fluid #{devise_controller? ? 'mw-md' : 'mw-xl'}"}
      = yield

.mw-md {
  max-width: 576px;
}

このようにしています。

もしお分かりになる方いましたら教えていただけると幸いです。

Answer 1

「全て」に対してか、「一部」に対してで対応違いますが、
CSSは基本は後勝ちなので、下記のいずれかで対応できます。

• 同名クラスを自前で定義し、上書きしたい指定だけ設定する
• 上書きしたい指定を設定した別のクラスを自前で定義し、上書きしたい元のクラスが適用されている要素に併用する

Comments

[退会済みユーザー]

ありがとうございます！！

[m.ts10806]

結局どのように解決したのでしょう。
お礼よりもフィードバックが欲しいです。
https://teratail.com/help/question-tips#questionTips4-2

[退会済みユーザー]

コメント遅れて申し訳ありません。
%div{:class => "container-fluid px-0 #{devise_controller? ? 'mw-md' : 'mw-xl'}"}
= yield

このようにして解決しました。