Eu encontrei um "problema" irritante com meussite, usando o Twitter Bootstrap. Eu tenho um contêiner principal usando a classe de inicialização padrão do .container e dei a ele uma largura específica no meu arquivo css personalizado. No entanto, quando incluí o arquivo bootstrap-responsive.css no meu documento HTML, ele parece substituir a largura do meu contêiner.
Esta é a ordem dos meus arquivos CSS:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/Site.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
Por que motivo há uma largura especificada no arquivo css responsivo? Existe uma maneira fácil de corrigir isso sem editar manualmente o bootstrap-responsive.css (que eu acho que seria uma má idéia)
Preciso do bootstrap-responsive.css para tornar meu site compatível com dispositivos móveis / tablets.
Respostas:
1 para resposta № 1É a largura mínima no bootstrap que é necessária para manter a estrutura adequada. Por outro lado, você pode simplesmente colocar seu código css DEPOIS DE responsivo para que sua regra substitua a regra de inicialização.
0 para resposta № 2
Pessoalmente, costumo carregar meu próprio costumefolha de estilo depois de todos os outros arquivos CSS. Mas você deve ter certeza de não alterar nenhum valor padrão para propriedades globais ... ou propriedades relacionadas ao layout, ou seja: .recipiente
Em geral, essa classe é reutilizada várias vezese pode ser ajustado para diferentes dispositivos e situações. Portanto, sugiro alterar esses valores em bootstrap-responsive.css Este é o arquivo, que contém todas as suas consultas de mídia.
Caso contrário, você acabará substituindo a capacidade de resposta desejada, e isso poderá resultar em propriedades CSS com exceções importantes. Isso deve ser evitado por todos os meios.
0 para resposta № 3
Quando você usa CSS, a última instância de uma informação de estilo tem prioridade. Por exemplo, se eu vincular a duas folhas de estilo diferentes, a segunda terá prioridade se houver um conflito ...
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
Neste exemplo, se o.Se o elemento container for alterado no arquivo style.css, os dados de estilo em style.css terão prioridade apenas se houver um conflito. Esse efeito é semelhante a ter CSS externo e interno em um único documento HTML. Aqui está um jsFiddle ilustrar. Aqui você vê que o estilo embutido teve prioridade e tornou a cor do texto laranja, mantendo o fundo preto.