Largura 100% do elemento bootstrap

Question 1

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

Configuração desejada:

Atualmente:

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.

Question 2

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>

Question 3

É 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.

Question 4

RESPOSTA RÁPIDA

Use vários NOT NESTED .container s
Enrole aqueles .containers que você deseja que tenham um fundo de largura total em umdiv
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:

Filho direto de um corpo
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/

Question 5

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;
}

Question 6

No bootstrap 4, você pode usar a classe 'w-100' (w como largura e 100 como 100%)

Você pode encontrar a documentação aqui: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

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

Question 8

Ao invés de

style="width:100%"

tente usar

class="col-xs-12"

isso vai economizar 1 personagem :)

Question 9

À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

Question 10

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/

Question 11

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.

Question 12

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

Question 13

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"
            });
        });
    }
});

Question 14

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.

Answer 1

96

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

Configuração desejada:

Atualmente:

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.

css twitter-bootstrap width 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

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

1

.row precisa de um .container ou, neste caso, .container-fluid.

netAction

Answer 6

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

Answer 7

É 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.

Answer 8

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

Answer 9

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

Answer 10

RESPOSTA RÁPIDA

Use vários NOT NESTED .container s
Enrole aqueles .containers que você deseja que tenham um fundo de largura total em umdiv
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:

Filho direto de um corpo
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/

Answer 11

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

Answer 12

aquele exemplo do jumbotron removeu todas as minhas perguntas.

Alexander Kim

Answer 13

À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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

18

No bootstrap 4, você pode usar a classe 'w-100' (w como largura e 100 como 100%)

Você pode encontrar a documentação aqui: https://getbootstrap.com/docs/4.0/utilities/sizing/

Dina
fonte

A melhor resposta se você estiver usando Bootstrap 4

Alexander G

Answer 18

A melhor resposta se você estiver usando Bootstrap 4

Alexander G

Answer 19

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

Answer 20

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

Answer 21

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

Answer 22

Não consigo ver que o OP solicitou a "largura total da página no navegador". Como você entende isso?

Yevgeniy Afanasyev

Answer 23

À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

Answer 24

Com o Bootstrap 4, esta é de longe a melhor resposta. Felicidades!

Metro Smurf de

Answer 25

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/

Answer 26

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.

Answer 27

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

Answer 28

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"
            });
        });
    }
});

Answer 29

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.

Largura 100% do elemento bootstrap

Respostas:

RESPOSTA RÁPIDA

MAIS INFORMAÇÕES

NÃO USE RECIPIENTES ANINHADOS

COMO FUNCIONA

O bootstrap em si está usando a mesma abordagem