Bootstrap: como posso alterar a largura do recipiente?
usei o Twitter Bootstrap para desenvolver um site com a classe de contêineres fixos, mas agora o cliente quer que o site seja 1000px de largura e não 1170px. Eu não uso .menos ficheiros.
Há alguma maneira rápida de resolver isto?7 answers
Vá para a Secção personalizar no site Bootstrap e escolha o tamanho que preferir. Terá de definir as variáveis @gridColumnWidth e @gridGutterWidth.
Por exemplo: @gridColumnWidth = 65px e @gridGutterWidth = 20px resultados numa disposição 1000px.
Aqui está a solução:
@media (min-width: 1200px) {
.container{
max-width: 970px;
}
}
A vantagem de fazer isto, em vez de personalizar o Bootstrap como em @Bastardo's, é que ele não altera o ficheiro Bootstrap. Por exemplo, se usar um CDN, você ainda pode baixar a maior parte do Bootstrap a partir do CDN.
No Bootstrap 3.0, A classe do contentor controla a largura, e todos os estilos contidos ajustam-se para encher o contentor. As variáveis da largura do recipiente estão na parte inferior das variáveis.menos ficheiro.
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-lg-desktop: ((1020px + @grid-gutter-width));
@mcbjam já deu esta resposta, mas aqui está uma explicação um pouco mais.
Você pode facilmente fazer a alteração usando uma consulta multimédia no seu ficheiro CSS sem transferir BS. Acabei de fazer isto e funciona lindamente.
O valor "min-width" da pesquisa multimédia irá dizer ao CSS para mudar a largura do seu contentor para 1000px apenas em ecrãs maiores que 1200px (ou seja qual for a largura que escolher incluir lá). Isto preserva a capacidade de resposta do seu site, por isso, quando a tela o tamanho salta abaixo desse valor (monitor menor, tablet, smartphone, etc.), o seu site ainda irá ajustar para caber as telas menores.
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}
Defina a sua própria classe de contentor com 1000px de largura e depois use container-fluid classe boostrap em vez de container.
Funciona mas pode não ser a melhor solução.
Use um selector de invólucro e crie um recipiente que tenha uma largura de 100% dentro desse invólucro para encapsular a página inteira.
<style>#wrapper {width: 1000px;}
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
<div class="container">
<div class="row">....
Agora a largura máxima está definida para 1000px e não precisa de menos nem de menos.
Adicione este pedaço de CSS ao seu estilo de css. É melhor adicionar isso depois que o arquivo css bootstrap é adicionado, a fim de sobrepor o mesmo.
html, body {
height: 100%;
max-width: 100%;
overflow-x: hidden;
}`