Largura 100% do elemento bootstrap

96

Quero criar blocos alternados 100% coloridos. Uma situação "ideal" é ilustrada como um anexo, assim como a situação atual.

Configuração desejada:

http://i.imgur.com/aiEMJ.jpg

Atualmente:

http://i.imgur.com/3Sl27.jpg

Minha primeira ideia foi criar uma classe div, dar a ela uma cor de fundo e 100% de largura.

.block {
    width: 100%;
    background: #fff;
}

No entanto, você pode ver que isso obviamente não funciona. Está confinado a uma área de contêineres. Tentei fechar o recipiente e também não funcionou.

user1589214
fonte
Você poderia incluir o código com o qual está trabalhando? Sem isso, tudo o que posso dizer é que você teria que se certificar de que as tags contidas para o div não tenham uma largura definida diferente de 100%
Michael Peterson
Ei Michael, obrigado pela resposta. Esta é a seção do código com o qual estou trabalhando: <div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
user1589214

Respostas:

78

A containerclasse intencionalmente não tem 100% de largura. São larguras fixas diferentes dependendo da largura da janela de visualização.

Se você quiser trabalhar com a largura total da tela, use .container-fluid:

Bootstrap 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>
Ross Allen
fonte
1
.row precisa de um .container ou, neste caso, .container-fluid.
netAction
1
Se você estiver usando a versão mais antiga da folha de estilo do bootstrap, container-fluidisso causará uma barra de rolagem horizontal. Para corrigir isso, adicione à sua folha de estilo.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Charlie
29

É assim que você pode obter a configuração desejada com o Bootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

A container-fluidparte garante que você pode alterar o fundo em toda a largura. A containerparte certifica-se de que seu conteúdo ainda está embrulhado em uma largura fixa.

Essa abordagem funciona, mas pessoalmente não gosto de todo o aninhamento. No entanto, não encontrei uma solução melhor até agora.

JacobF
fonte
3
Na verdade, parece que "nenhum contêiner pode ser aninhado " getbootstrap.com/css/#overview-container , portanto, espere alguns problemas aqui (mas ainda vou usar sua solução, acho).
Thibaut Barrère
Vale a pena notar que a classe de fluido de contêiner não está disponível no bootstrap 3.0, mas está disponível no 3.1 e superior
Dev
29

RESPOSTA RÁPIDA

  1. Use vários NOT NESTED .container s
  2. Enrole aqueles .containers que você deseja que tenham um fundo de largura total em umdiv
  3. Adicione um fundo CSS ao div de envolvimento

Fiddles: Simples: https://jsfiddle.net/vLhc35k4/ , Bordas do contêiner: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

MAIS INFORMAÇÕES

NÃO USE RECIPIENTES ANINHADOS

Muitas pessoas irão sugerir ( erroneamente ) que você deve usar contêineres aninhados.
Bem, você NÃO deveria .
Eles não devem ser aninhados. (Consulte a seção " Contêineres " nos documentos)

COMO FUNCIONA

divé um elemento de bloco, que por padrão se estende por toda a largura do corpo do documento - há o recurso de largura total. Ele também tem uma altura de seu conteúdo (se você não especificar o contrário).

Os contêineres de bootstrap não precisam ser filhos diretos de um corpo, eles são apenas contêineres com algum preenchimento e possivelmente algumas larguras fixas variáveis ​​de largura de tela.

Se uma grade básica .containertiver alguma largura fixa, ela também será centralizada automaticamente na horizontal.
Portanto, não há diferença se você o coloca como:

  1. Filho direto de um corpo
  2. Filho direto de um básico div que é filho direto de um corpo.

Por "básico" divquero dizer divque não tem um CSS alterando sua borda, padding, dimensões, posição ou tamanho do conteúdo. Na verdade, apenas um elemento HTML com display: block;CSS e possivelmente fundo.
Mas é claro que configurar CSS tipo vertical (altura, padding-top, ...) não deve quebrar a grade do bootstrap :-)

O bootstrap em si está usando a mesma abordagem

... Tudo em seu próprio site e em seu exemplo "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

jave.web
fonte
1
Esta resposta é muito completa e inflexível de que aninhar contêineres dentro de outros contêineres é uma 'ideia muito ruim' (como 'cruzar os fluxos', ruim em Ghostbusters) e ele aponta para uma referência de site Bootstrap que apóia isso. Incluir um contêiner dentro de uma div simples é a sugestão e o fato de Boostrap usar essa técnica em seu exemplo Jumbotron me diz que jave.web é o vencedor de hoje!
Volksman
aquele exemplo do jumbotron removeu todas as minhas perguntas.
Alexander Kim
Às vezes, não é possível fechar o Container e abrir um novo Full-with Container. A solução alternativa. Na seguinte resposta é melhor!
RubbelDeCatc
21

Existe uma solução alternativa usando vw. É útil quando você não pode criar um novo recipiente de fluido. Este, dentro de um div "contêiner" clássico, terá o tamanho máximo.

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

Depois disso vem o problema da barra lateral (graças ao @Typhlosaurus), resolvido com esta função js, ​​chamando-a no carregamento e redimensionamento do documento:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}
benedex82
fonte
3
Isso é extremamente próximo de uma resposta ideal que não requer uma mudança no layout geral da página e, às vezes, será suficiente, no entanto, existem problemas sutis com as barras de rolagem. O .row-full preencherá toda a janela, ignorando as barras de rolagem, ao contrário de um fluido de contêiner que preencherá toda a janela com ou sem as barras de rolagem, dependendo se a barra de rolagem é opaca.
Tiflossauro
Uau. O js fez o truque, estive procurando por horas em uma solução. Meu problema é que o conteúdo é inserido dentro de um cms e, portanto, não posso alterar o html externo. Realmente gostaria de saber se existe uma solução sem o js.
drooh
6

Se você não pode alterar o layout HTML:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}
<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

Demonstração: http://www.bootply.com/tVkNyWJxA6

Seb33300
fonte
2

Ao invés de

style="width:100%"

tente usar

class="col-xs-12"

isso vai economizar 1 personagem :)

Yevgeniy Afanasyev
fonte
Esta resposta não é o que OP estava pedindo. Isso criará uma coluna com a largura total do .containerdiv externo , mas que não seja igual à largura total da página no navegador, que é o que a pergunta está perguntando.
Hartley Brody de
Não consigo ver que o OP solicitou a "largura total da página no navegador". Como você entende isso?
Yevgeniy Afanasyev
2

Às vezes, não é possível fechar o contêiner de conteúdo. A solução que estamos usando é um pouco diferente, mas evita um estouro por causa do tamanho da barra de rolagem do Firefox!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

Aqui está um exemplo: https://jsfiddle.net/RubbelDeKatz/wvt9253q

RubbelDeCatc
fonte
Com o Bootstrap 4, esta é de longe a melhor resposta. Felicidades!
Metro Smurf de
1

Desculpe, deveria ter pedido seu css também. Como está, basicamente o que você precisa é dar ao seu div do contêiner o estilo .container { width: 100%; }em seu css e, em seguida, os divs incluídos herdarão isso, desde que você não dê a eles sua própria largura. Também faltaram algumas tags de fechamento, e o </center>fecha <center>sem nunca ter sido aberto, pelo menos nesta seção do código. Não tinha certeza se você queria a imagem no mesmo div que contém o seu conteúdo ou separado, então criei dois exemplos. Mudei a largura do img para 100px simplesmente porque jsfiddle oferece uma pequena área de visualização. Avise-me se não for o que você está procurando.

conteúdo e imagem separados: http://jsfiddle.net/QvqKS/2/

conteúdo e imagem no mesmo div (img flutuado para a esquerda): http://jsfiddle.net/QvqKS/3/

Michael Peterson
fonte
0

Gostaria de saber por que alguém tentaria "sobrescrever" a largura do contêiner, já que sua finalidade é manter seu conteúdo com algum preenchimento, mas eu tive uma situação semelhante (é por isso que eu queria compartilhar minha solução, embora haja respostas )

Na minha situação, eu queria ter todo o conteúdo (de todas as páginas) renderizado dentro de um contêiner, então este foi o trecho de código do meu _Layout.cshtml:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

Na minha página de índice inicial, eu tinha uma imagem de cabeçalho de plano de fundo que gostaria de preencher toda a largura da tela , então a solução foi fazer o Index.cshtml assim:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

Acho que isso é melhor do que tentar contornar o problema, já que as seções são feitas com o propósito de permitir (ou forçar) que as visualizações substituam dinamicamente algum conteúdo no layout.

Alisson
fonte
0

Embora as pessoas tenham mencionado que você precisará usar .container-fluid neste caso, mas também terá que remover o enchimento do bootstrap.


fonte
0

A seguinte resposta não é exatamente ideal em nenhuma medida, mas eu precisava de algo que mantivesse sua posição dentro do contêiner enquanto estica totalmente o div interno.

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});
adamj
fonte
0

Eu usaria dois div 'contêiner' separados, conforme abaixo:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

Tenha em mente que o container-fluid não segue seus pontos de interrupção e é um container de largura total.

Arash MAS
fonte