Como sobrescrever os estilos no Twitter Bootstrap? Por exemplo, atualmente estou usando uma classe .sidebar que possui a regra CSS 'float: left;' Como posso mudar isso para que ele vá para a direita? Estou usando HAML e SASS, mas sou relativamente novo no desenvolvimento web.
Respostas:
Adicione sua própria classe, ex:, <div class="sidebar right"></div>com o CSS como
.sidebar.right {
float:right
} Todas essas dicas funcionarão, mas uma maneira mais simples pode ser incluir sua folha de estilo após os estilos do Bootstrap.
Se você incluir seu css ( site-specific.css) após o Bootstrap ( bootstrap.css), poderá substituir as regras redefinindo-as.
Por exemplo, se é assim que você inclui CSS no seu <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />Você pode simplesmente mover a barra lateral para a direita escrevendo (em seu site-specific.cssarquivo):
.sidebar {
float: right;
}Perdoe a falta de HAML e SASS, não os conheço o suficiente para escrever tutoriais neles.
!importanté que você nunca poderá substituí-lo novamente no futuro.
Site.cssé agrupado, listado Bundle.confige renderizado fisicamente depois, bootstrap.css mas os estilos ainda não são substituídos. Eu tive que tomar a site.cssreferência fora do pacote modernizador e colocar manualmente que após a bootstrap.css(e pressione Ctrl + F5 uma vez depuração para limpar o cache)
A resposta para isso é a especificidade do CSS. Você precisa ser mais "específico" no seu CSS para que ele possa substituir as propriedades do bootstrap css.
Por exemplo, você tem um código de exemplo para um menu de inicialização aqui:
<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>Aqui, você precisa se lembrar da hierarquia da especificidade. É assim:
Portanto, para o exposto acima, se o seu css tiver algo parecido com isto:
.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 */Portanto, mesmo que você tenha definido o .navbar adepois, .navbar ul li aele ainda será substituído por uma cor vermelha, em vez de verde, pois a especificidade é maior (13 pontos).
Então, basicamente, tudo o que você precisa fazer é calcular os pontos do elemento para o qual você deseja alterar o css, via elemento de inspeção no seu navegador. Aqui, o bootstrap especificou seu css para o elemento como
.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
color: #999;
}Portanto, mesmo se o carregamento do seu css estiver sendo carregado após o bootstrap.css, que possui a seguinte linha:
.navbar-nav li a {
color: red;
}ainda será renderizado como # 999. Para resolver isso, o bootstrap tem 22 pontos (calcule você mesmo). Então, tudo o que precisamos é algo mais que isso. Assim, adicionei IDs personalizados aos elementos, ou seja, home-menu-container e home-menu. Agora, o seguinte css funcionará:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Feito.
Você pode consultar este link MDN .
blockquoteestilo no CSS do Bootstrap. Estranhamente, estava errado para as citações de bloco normais, mas parecia certo e <ul> dentro de uma citação de bloco. A chave estava atualizando meu CSS blockquote p, o que dava prioridade suficiente. O <ul> estava fazendo isso na outra seção da página.
Você pode substituir uma classe CSS, tornando-a "mais específica".
Você sobe na árvore HTML e especifica elementos pai:
div.sidebar { ... } é mais específico que .sidebar { ... }
Você pode ir até BODY se precisar:
body .sidebar { ... } substituirá praticamente qualquer coisa.
Consulte este guia prático: http://css-tricks.com/855-specifics-on-css-specificity/
Se você deseja sobrescrever qualquer css no bootstrap use! Important
Digamos que aqui está a classe do cabeçalho da página no bootstrap que tem margem de 40px na parte superior, meu cliente não gosta e ele quer que ela seja 15 na parte superior e 10 na parte inferior
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Então adicionei aula no meu arquivo site.css com o mesmo nome como este
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Observe o! Important with my margin, que substituirá a margem da margem da classe bootstarp page-header.
Me deparei com isso tarde, mas acho que poderia usar outra resposta.
Se você estiver usando o sass, poderá alterar as variáveis antes de importar o bootstrap. http://twitter.github.com/bootstrap/customize.html#variables
Altere qualquer um deles, como:
$bodyBackground: red;
@import "bootstrap";Como alternativa, se não houver uma variável disponível para o que você deseja alterar, você pode substituir os estilos ou adicionar os seus.
Sass:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Veja também: Estrutura apropriada de ativos SCSS no Rails
Eu sei que esta é uma pergunta antiga, mas ainda assim, me deparei com um problema semelhante e percebi que meu código css "não está funcionando" no meu bootstrapOverload.cssarquivo foi gravado após o arquivo media queries. quando o movi para cima das consultas de mídia, ele começou a funcionar.
Caso alguém esteja enfrentando o mesmo problema