Twitter Bootstrapでスタイリングを上書きする方法


128

Twitter Bootstrapのスタイリングを上書きするにはどうすればよいですか?たとえば、私は現在、CSSルール「float:left;」を含む.sidebarクラスを使用しています。代わりに右に行くようにこれを変更するにはどうすればよいですか?私はHAMLとSASSを使用していますが、Web開発は比較的新しいです。


回答:



233

これらのヒントはすべて機能しますが、より簡単な方法は、Bootstrapスタイルのにスタイルシートを含めることです。

site-specific.cssBootstrapの()の後にcss()を含めると、bootstrap.cssルールを再定義してオーバーライドできます。

たとえば、これがCSSを含める方法である場合 <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

site-specific.cssファイルに)書き込むことで、サイドバーを右に移動できます。

.sidebar {
    float: right;
}

HAMLとSASSの欠如を許して、私はそれらをチュートリアルを書くほど十分に知りません。


7
@ClaudiuConstantin理由がわかりません。経験則では、2 つが同じレベルの特異性であれば、2番目のスタイルは常に最初のスタイルより優先されます。あなたのスタイルが優先される限り、それが上書きされます。
citelao

3
@Krekerそれはおそらく特異性と多くの関係があります。あなたはそれについてここで読むことができます(古い記事)が、基本的に.sidebar.rightはより具体的です.sidebar。それがおそらく問題です。Webインスペクタを使用して、何が上書きされているかを調べます。
citelao 2013

2
@クレーカーうん、それはアイデアだ。の問題!importantは、将来再び上書きすることができないことです。
citelao 2013

5
Site.cssは束ねられてリストされBundle.config、物理的 レンダリングされますbootstrap.cssが、スタイルはまだオーバーライドされていません。私はsite.cssbootstrap.css
モダナイザー

1
これは機能するかもしれませんが、本番環境ではベストプラクティスではありません。大きな理由がない限り、サイトごとに1つのスタイルシートを読み込みます。#sitespeed
Ben Racicot、2015

58

これに対する答えはCSSの特異性です。ブートストラップのcssプロパティをオーバーライドできるように、CSSをより「特定」にする必要があります。

たとえば、ここにブートストラップメニューのサンプルコードがあります。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

ここでは、特異性の階層を覚えておく必要があります。こんなふうになります:

  • 100ポイントの言及されたIDを持つ要素を与える
  • クラスに10ポイント記載されている要素を与える
  • 単純な要素に単一の1ポイントを与える

したがって、上記の場合、CSSが次のようなものであれば、

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

したがって、.navbar a後を定義した.navbar ul li a場合でも、特異度はより高いので(13ポイント)、緑色ではなく赤色で上書きされます。

したがって、基本的に必要なのは、ブラウザーのinspect要素を使用して、CSSを変更する要素のポイントを計算することだけです。ここでは、ブートストラップは要素のcssを次のように指定しています。

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

したがって、cssが読み込まれている場合でも、次の行があるbootstrap.cssの後に読み込まれます。

.navbar-nav li a {
    color: red;
}

それでも#999としてレンダリングされます。これを解決するために、ブートストラップには22ポイントあります(自分で計算してください)。したがって、必要なのはそれ以上のものです。したがって、カスタムIDを要素、つまりhome-menu-containerとhome-menuに追加しました。これで、次のCSSが機能します。

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

できました。

このMDNリンクを参照できます。


1
彼らが結ばれている場合はどうなりますか?
2015年

2
それは重要ではありません。たとえば、「。abc.xyz」は、クラス「abc」と「xyz」の要素があることを意味します-それでも、クラスを持つ単一の要素としてそれを受け取ります。したがって、10ポイント。IDについても同様です。
kaizer1v

1
よく書かれました!ありがとうございました!
GobSmack

1
これは私にとってのトリックでした。blockquoteBootstrap CSSでスタイルを上書きするのに問題がありました。不思議なことに、それは通常のブロッククォートでは間違っていましたが、ブロッククォート内で<ul>を正しく探しました。重要なのは、CSSをに更新blockquote pすることでした。これにより、十分な優先順位が与えられました。<ul>は、ページの他のセクションでこれを行っていました。
Adam Wuerl、2016

20

CSSクラスを「より具体的に」することで上書きできます。

HTMLツリーを上に移動して、親要素を指定します。

div.sidebar { ... } より具体的です .sidebar { ... }

次のことが必要な場合は、BODYまで実行できます。

body .sidebar { ... } 事実上すべてを上書きします。

この便利なガイドを参照してください:http : //css-tricks.com/855-specifics-on-css-specificity/


これが実際に最良の答えです
CodyBugstein

9

あなたは必ず、あなたのcssファイルのパースを行うことができますAFTERそうのように、boostrap.css:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">


6

ブートストラップのcssを上書きする場合は、!importantを使用してください。

ここに、上に40pxのマージンがあるブートストラップのページヘッダークラ​​スがあるとします。私のクライアントはそれが気に入らず、上に15、下のみに10にしたいと考えています。

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

だから私はこのような同じ名前で私のsite.cssファイルにクラスを追加しました

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

!重要なマージンに注意してください。これにより、bootstarpページヘッダークラ​​スマージンのマージンが上書きされます。


驚くばかり!これが私が欲しいものです。ありがとう
ギスウェイ14

2
!importantを使用することは、ある程度のアンチパターンであることに注意してください。詳細はこちら:james.padolsey.com/css/dont-use-important
mayatron

3

この晩に出会ったが、私はそれが別の答えを使うことができると思います。

sassを使用している場合は、ブートストラップをインポートする前に実際に変数を変更できます。http://twitter.github.com/bootstrap/customize.html#variables

次のようなものを変更します。

$bodyBackground: red;
@import "bootstrap";

あるいは、変更したいものに使用できる変数がない場合は、スタイルをオーバーライドするか、独自のスタイルを追加できます。

サス:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

こちらもご覧ください:Railsの適切なSCSSアセット構造


2

私はこれが古い質問であることを知っていますが、それでも同様の問題に遭遇し、bootstrapOverload.cssファイル内の「機能していない」CSSコードがの後に記述されていることに気付きましたmedia queries。メディアクエリの上に移動すると、機能し始めました。

他の誰かが同じ問題に直面している場合に備えて

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.