質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

976閲覧

Bootstrapでのcssについて

退会済みユーザー

退会済みユーザー

総合スコア0

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/05/03 12:01

イメージ説明

現状

画像の

.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; }

このようにしています。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2021/05/03 20:27

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/05/04 01:57

ありがとうございます!!
退会済みユーザー

退会済みユーザー

2021/05/08 11:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問