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.