100% de largura do Twitter Bootstrap 3 modelo

134

Eu sou um novato no bootstrap e tenho um modelo 100% amplo que quero codificar com o bootstrap. A primeira coluna começa no canto esquerdo e eu tenho um mapa do Google que se estende para a direita. Eu pensei que poderia fazer isso com a container-fluidaula, mas isso parece não estar mais disponível. Não tenho idéia de como atingir esse layout com o bootstrap 3. Estou usando o modelo PSD da Geometria da themeforest, o link aqui se você quiser ver o layout: http://themeforest.net/item/geometry-design-for- geolocalização-rede-social / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
fonte
5
Você pode personalizar o Bootstrap para usar @container-*larguras como 100%. Além disso, .container-fluidestá voltando no 3.1.0. :)

Respostas:

247

Para o Bootstrap 3, você precisaria usar um wrapper personalizado e definir sua largura para 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Aqui está um exemplo de trabalho no Bootply

Se você preferir não adicionar uma classe personalizada, poderá obter um layout muito amplo (não 100%) envolvendo tudo dentro de uma col-lg-12( demonstração de layout amplo )

Atualização para o Bootstrap 3.1

A container-fluidclasse retornou no Bootstrap 3.1, portanto, isso pode ser usado para criar um layout de largura total (não é necessário CSS adicional).

Demonstração do Bootstrap 3.1

Zim
fonte
13
Você precisa ser cuidadoso. A linha tem uma margem de -15px esquerda e direita. Isso é compensado pelo contêiner que possui um preenchimento de 15px. A melhor maneira é adicionar esse preenchimento ao seu contêiner e usar linhas e colunas para criar sua grade.
Rootman
6
@rootman Estou usando class = "container container-full" e isso parece estar funcionando.
Kenmore
Use fluido de contêiner junto com um col-md-12 para obter uma linha em tamanho real. Haverá uma calha (15px padrão em cada lado) que precisa ser removida. A maneira mais fácil é removê-lo manualmente, usando o seguinte css personalizado: #SomeId div {padding-left: 0; padding-right: 0; }
Martin
2
Obrigado pela dica ... o fluido do contêiner funcionou bem para mim, não são necessárias outras alterações. A sarjeta não apresentou um problema porque a configuração da cor de plano de fundo da classe contida renderizou a cor nas bordas, conforme desejado, enquanto o texto e outros elementos foram ligeiramente deslocados, também conforme desejado.
Krishna Gupta
30

Essa é a estrutura básica completa para o layout com 100% de largura no Bootstrap v3.0.0 . Você não deve envolver sua <div class="row">com containerclasse. A containerclasse Cause terá muita margem e isso não fornecerá um layout de tela cheia (largura de 100%) em que o bootstrap removeu a classe de fluido de contêiner da versão inicial para dispositivos móveis v3.0.0.

Portanto, comece a escrever <div class="row">sem a classe de contêiner e você estará pronto para usar o layout com 100% de largura.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Para ver o resultado por si mesmo, criei um bootply. Veja a saída ao vivo lá. http://bootply.com/82136 E o layout básico completo do bootstrap 3 com 100% de largura, criei uma essência. você pode usar isso. Pegue a essência daqui

Responda-me se precisar de mais assistência. Obrigado.

Shaharia Azam
fonte
20
Esta solução adiciona uma barra de rolagem horizontal no FF devido à margem em .row. Os documentos de inicialização dizem que o .row sempre deve ser usado dentro de um contêiner por causa disso - as pessoas que desejam criar layouts totalmente fluidos (o que significa que o site estende toda a largura da janela de exibição) devem agrupar o conteúdo da grade em um elemento contendo preenchimento: 0 15px; para compensar a margem: 0 -15px; usado em linhas. - getbootstrap.com/css/#grid-intro
nealio82
5
Nealio está correto. Você ainda deve usar um contêiner. Eu envolvo meus linhas de largura total em um .container cheio a presente declaração CSS:.container-full { padding: 0 15px; }
tbeseda
3
Parece ser um erro no bootstrap. Eu o resolvi adicionando o seguinte ao elemento do contêiner onde suas linhas de tela cheia são colocadas: padding: 0 15px; margem esquerda: 0px; margem direita: 0 px;
Jorre
2
Todos os .rows não precisam estar contidos em um .container?
Skokey #
2
Erik Flowers escreveu um ótimo artigo sobre a relação contêiner / linha, eu recomendo a leitura!
Idleberg 9/08/14
27

Usando o Bootstrap 3.3.5 e .container-fluid, é assim que obtenho largura total sem calhas ou rolagem horizontal no celular. Observe que .container-fluidfoi reintroduzido no 3.1.

Largura total no celular / tablet, 1/4 de tela na área de trabalho

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Largura total em todas as resoluções (móvel, tabela, desktop)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>
angularsen
fonte
20

Você está usando direito div.container-fluide também precisa de um div.rowfilho. Em seguida, o conteúdo deve ser colocado dentro sem colunas de grade. Se você der uma olhada nos documentos, poderá encontrar este texto:

  • As linhas devem ser colocadas dentro de um contêiner (largura fixa) ou .contêiner (largura total) para alinhamento e preenchimento adequados.
  • Use linhas para criar grupos horizontais de colunas.

Não usando colunas da grade, está tudo bem, conforme indicado aqui:

  • O conteúdo deve ser colocado dentro das colunas e apenas as colunas podem ser filhos imediatos das linhas.

E, olhando para este exemplo, você pode ler este texto:

Largura total, coluna única : nenhuma classe de grade é necessária para elementos de largura total.

Aqui está um exemplo ao vivo mostrando alguns elementos usando o layout correto. Dessa forma, você não precisa de nenhum CSS ou hack personalizado.

gerardnll
fonte
5

No BOOTSTRAP 4, você pode usar

<div class="row m-0">
my fullwidth div
</div>

... se você apenas usar um .row sem o .m-0 como uma div de nível superior, terá uma margem indesejada, o que torna a página mais larga que a janela do navegador e causa uma barra de rolagem horizontal.

Felix
fonte