129

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

4

8 に答える 8

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 の欠如を許してください。私はそれらについてチュートリアルを書くほどよく知りません。

于 2011-11-10T20:34:38.513 に答える
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>

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

  • ID が言及されている要素に100 ポイントを与える
  • 言及されたクラスを持つ要素に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 ポイント)。

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

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

したがって、css がロードされている場合でも、bootstrap.css の後に次の行がロードされています。

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

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

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

終わり。

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

于 2013-12-12T11:30:36.317 に答える
41

<div class="sidebar right"></div>CSS を次のように指定して、独自のクラス ex: を追加します。

.sidebar.right { 
    float:right
}
于 2011-11-10T19:37:53.893 に答える
20

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

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

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

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

body .sidebar { ... }事実上すべてをオーバーライドします。

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

于 2011-11-10T19:50:20.260 に答える
6

ブートストラップで css を上書きしたい場合は !important を使用してください

ここに、上部に 40px の余白があるブートストラップのページ ヘッダー クラスがあるとしましょう。

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

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

于 2014-02-17T05:20:01.660 に答える
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 アセット構造

于 2012-11-20T21:44:30.710 に答える