답변:
<div class="sidebar right"></div>CSS를 다음과 같이 자신의 클래스 ex :로 추가하십시오.
.sidebar.right {
float:right
} 이러한 모든 끝은 작동하지만 간단한 방법은 스타일 시트를 포함 할 수 있습니다 후 부트 스트랩 스타일을.
site-specific.css부트 스트랩 다음에 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가 부족하다는 것을 용서하면 튜토리얼을 작성하기에 충분하지 않습니다.
!important는 나중에 다시 무시할 수 없다는 것입니다.
Site.css번들과에 나와있는 Bundle.config물리적 렌더링 후 bootstrap.css 하지만 스타일은 여전히 무시하지 않습니다. site.cssbootstrap.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를 추가했습니다. 이제 다음 CSS가 작동합니다.
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */끝난.
이 MDN 링크를 참조 할 수 있습니다 .
blockquoteBootstrap 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;
}내 마진과 함께! 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;
}: 또한이 볼 레일에 적절한 SCSS 자산 구조