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

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