Bootstrap: como altero a largura do contêiner?

125

Eu usei o Twitter Bootstrap para desenvolver um site com a classe de contêiner fixo, mas agora o cliente deseja que o site tenha 1000 px de largura e não 1170px. Eu não uso os arquivos .less.

Existe uma maneira rápida de corrigir isso?

twitter-bootstrap alex
fonte
Consulte a resposta aqui , acho que seu problema será resolvido pelo violino de Fixed-only nessa resposta.
prem
@prem, tx, mas eu não entendo o exemplo, pois ele não usa nenhuma das classes de bootstrap como span ou container. Tudo o que eu acho que preciso para este projeto é definir o máximo do contêiner para 940px com o bootstrap responsivo.
alex

Respostas:

75

Vá para a seção Personalizar no site Bootstrap e escolha o tamanho que você preferir. Você terá que definir @gridColumnWidthe @gridGutterWidthvariáveis.

Por exemplo: @gridColumnWidth = 65pxe @gridGutterWidth = 20pxresultados em um 1000pxlayout.

Então faça o download.

albertedevigo
fonte
não é possível alcançar o contêiner 1000px exato alterando as variáveis ​​gridColumnWidth e gridGutterWidth ... porque (12 * (gridColumnWidth) + 12 (gridGutterWidth)) não é igual a 1000. E, portanto, somente eu dei essa solução. Isso está correto?
prem
15
Teoricamente, existem infinitas combinações que correspondem a 1000px. Um exemplo: 12 * 65 + 11 * 20 = 1000 (existem apenas 11 calhas entre colunas).
Albertedevigo 14/06/2013
Hã! Eu realmente não reconheci a coisa simples ... de qualquer maneira, o seu é a solução adequada.
prem
Obrigado pela sua publicação, foi útil;) Apenas uma observação: Praticamente haveria exatamente 7 soluções usando pixels completos para 1000px de largura. (larguras de colunas 10, 21, 32, 43, 54, 65 e 76)
dfherr
@dfherr Não sei exatamente o que você quer dizer quando diz "praticamente", mas lembre-se de que o CSS suporta valores decimais para pixels. Portanto, existem infinitas soluções. w3.org/TR/CSS21/syndata.html#length-units
albertedevigo
228

Aqui está a solução:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

A vantagem de fazer isso, em vez de personalizar o Bootstrap como na resposta de @ Bastardo , é que ele não altera o arquivo do Bootstrap. Por exemplo, se você estiver usando uma CDN, ainda poderá fazer o download da maior parte do Bootstrap a partir da CDN.

mcbjam
fonte
10
A maioria das respostas negligencia a CDN. Sua resposta é uma solução perfeita.
Charles Watson
2
É perfeito para pessoas que estão usando a CDN. Modificar o LESS (quando 4 chegar, o SASS) no tempo de compilação é perfeito para pessoas que hospedam seu próprio CSS do Bootstrap. No entanto, modificar um LESS personalizado (ou SASS) importado após o fornecido significa que você pode atualizar o LESS subjacente sem (normalmente) fazer uma comparação.
Greg Pettit
2
Sei que é muito tarde, mas os contêineres tendem a ser maiores agora se você adicionar width: auto ao código acima, você pode fazer contêineres maiores que o máximo de 1170.
Rick Calder
É o que eu estava procurando. Obrigado.
Tedebus
20

Você está amarrando uma das costas dizendo que não usará os arquivos MENOS. Criei meu primeiro tema de Twitter Bootstrap usando o 2.0 e fiz tudo em CSS - criando um arquivo override.css. Demorou dias para que as coisas funcionassem corretamente.

Agora temos 3.0. Deixe-me assegurar-lhe que leva menos tempo para aprender LESS, o que é bastante simples se você se sentir confortável com CSS, do que fazer todas essas substituições loucas de CSS. Fazer alterações como a desejada é um pedaço de bolo.

No Bootstrap 3.0, a classe de contêiner controla a largura e todos os estilos contidos são ajustados para preencher o contêiner. As variáveis ​​de largura do contêiner estão na parte inferior do arquivo variables.less.

// 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));

Alguns sites não têm conteúdo suficiente para preencher a tela 1020 ou você deseja um quadro mais estreito por razões estéticas. Como o BS usa uma grade de 12 colunas, uso um múltiplo como o 960.

Bastardo Sucio
fonte
4
Funciona, mas: variáveis nomes são @container-sm, @container-mde @container-lg(agora)
Andreas Dolk
1
@Bastardo nice name +1
Ömer An
18

O @mcbjam já deu essa resposta, mas aqui está um pouco mais de explicação.

Você pode fazer as alterações facilmente usando uma consulta de mídia no seu arquivo CSS sem fazer o download do BS. Acabei de fazer isso e funciona lindamente.

O valor "min-width" da consulta de mídia informará ao CSS para alterar a largura do seu contêiner para 1000 px somente em telas maiores que 1200 px (ou qualquer largura que você escolher incluir). Isso preserva a capacidade de resposta do seu site; portanto, quando o tamanho da tela ultrapassar esse valor (monitor menor, tablet, smartphone etc.), seu site ainda será ajustado para caber nas telas menores.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}
Jeff Schwarting
fonte
13

Para o bootstrap 4, se você estiver usando o Sass, aqui está a variável a ser editada

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Para substituir essa variável, declarei $ container-max-widths sem o! Default no meu arquivo .sass antes de importar o bootstrap.

Nota: Eu só precisava alterar o valor xl para não me importar com pontos de interrupção.

Kaizoku Gambare
fonte
12

Defina sua própria classe de contêiner de conteúdo com a propriedade largura de 1000 px e use fluido de contêiner classe boostrap de de contêiner em vez de contêiner.

Funciona, mas pode não ser a melhor solução.

Geo
fonte
6

Use um seletor de invólucro e crie um contêiner com 100% de largura 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 como 1000 px e você não precisa de menos ou menos.

Larry Judd
fonte
0

Tamanhos de contêineres

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

na seção Tamanhos de contêiner, altere 1140para970

Espero que ajude você.

obrigado pelo seu correto. link para personalizar a inicialização: https://getbootstrap.com/docs/3.4/customize/

Então Santo
fonte
-3

Adicione esse pedaço de CSS ao seu estilo de CSS. É melhor adicionar isso após o arquivo bootstrap css ser adicionado, a fim de sobrescrever o mesmo. 

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`
Mahendra
fonte