回答:
<div class="sidebar right"></div>
CSSを次のように使用して、独自のクラスを追加します:
.sidebar.right {
float:right
}
これらのヒントはすべて機能しますが、より簡単な方法は、Bootstrapスタイルの後にスタイルシートを含めることです。
site-specific.css
Bootstrapの()の後に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の欠如を許して、私はそれらをチュートリアルを書くほど十分に知りません。
.sidebar.right
はより具体的です.sidebar
。それがおそらく問題です。Webインスペクタを使用して、何が上書きされているかを調べます。
!important
は、将来再び上書きすることができないことです。
Site.css
は束ねられてリストされBundle.config
、物理的に レンダリングされますbootstrap.css
が、スタイルはまだオーバーライドされていません。私はsite.css
bootstrap.css
これに対する答えは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>
ここでは、特異性の階層を覚えておく必要があります。こんなふうになります:
したがって、上記の場合、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リンクを参照できます。
blockquote
Bootstrap CSSでスタイルを上書きするのに問題がありました。不思議なことに、それは通常のブロッククォートでは間違っていましたが、ブロッククォート内で<ul>を正しく探しました。重要なのは、CSSをに更新blockquote p
することでした。これにより、十分な優先順位が与えられました。<ul>は、ページの他のセクションでこれを行っていました。
CSSクラスを「より具体的に」することで上書きできます。
HTMLツリーを上に移動して、親要素を指定します。
div.sidebar { ... }
より具体的です .sidebar { ... }
次のことが必要な場合は、BODYまで実行できます。
body .sidebar { ... }
事実上すべてを上書きします。
この便利なガイドを参照してください:http : //css-tricks.com/855-specifics-on-css-specificity/
ブートストラップの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ページヘッダークラスマージンのマージンが上書きされます。
この晩に出会ったが、私はそれが別の答えを使うことができると思います。
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アセット構造