Elemento Bootstrap 100% Largura

Question

Elemento Bootstrap 100% Largura

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

configuração desejada:

actualmente:

A minha primeira ideia foi criar uma classe div, dar-lhe uma cor de fundo e dar-lhe 100% de largura.

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

No entanto, podes ver que isto obviamente não funciona. Está confinado a uma área de contentores. Tentei fechar o contentor e isso não aconteceu. funcionar.

61

css twitter-bootstrap width

Author: Damjan Pavlica, 2012-08-10

Source

10 answers

score 56 · Answer 1

A classe container intencionalmente não tem 100% de largura. São diferentes larguras fixas, dependendo da largura da janela.

Se quiser trabalhar com toda a largura do ecrã, 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>

score 29 · Answer 2

É assim que pode alcançar a configuração desejada com 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 parte container-fluid assegura-se de que pode mudar o fundo sobre toda a largura. A parte container assegura-se de que o seu conteúdo ainda está embrulhado numa Largura Fixa.

Esta abordagem funciona, mas pessoalmente não gosto de todos os ninhos. No entanto, ainda não encontrei uma solução melhor.

score 24 · Answer 3

RESPOSTA RÁPIDA

utilizar múltiplos não aninhados .container
embrulhe esses .container Se quiser ter um fundo completo num div
adicionar um fundo CSS ao div

Violinos: Simples: https://jsfiddle.net/vLhc35k4/ , Recipiente de bordas: 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*/ }

OUTRAS INFORMAÇÕES

NÃO! UTILIZAR RECIPIENTES ANINHADOS

Muitas pessoas irão (erradamente sugerir, que você deve usar contêineres aninhados.
bem, não devias.
Eles não devem ser aninhados. (Ver secção "recipientes" nos documentos)

COMO FUNCIONA

div é um elemento de bloco, que por padrão se estende para a largura completa de um corpo de Documento - existe a funcionalidade de largura completa. Ele também tem uma altura do seu conteúdo (se você não especificar contrario).

Os recipientes das cabinas não são obrigados a ser filhos directos de um corpo, são apenas recipientes com algum enchimento e, possivelmente, algumas larguras fixas de largura variável do ecrã.

Se uma grelha básica .container tem alguma Largura Fixa, também é auto-centrada horizontalmente.
então não há diferença se você colocá-lo como um:

filho directo de um corpo
filho directo de um básico div Isso é um filho direto de um corpo.

Por "básico" div quero dizer div que não tem um CSS a alterar a sua fronteira, estofamento, Dimensões, Posição ou tamanho do conteúdo. Realmente apenas um elemento HTML com display: block; CSS e possivelmente fundo.
mas é claro que definir CSS vertical-like (Altura, estofamento-top,...) não deve quebrar a grelha de inicialização: -)

O próprio Bootstrap está a usar a mesma abordagem

...Em todo o seu próprio website e no seu"JUMBOTRON" exemplo:
http://getbootstrap.com/examples/jumbotron/

score 14 · Answer 4

Existe um workaround usando vw. É útil quando você não pode criar um novo recipiente de fluido. Isto, dentro de um clássico' container ' div será de tamanho completo.

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

Depois disto há o problema da barra lateral (graças a @Typhlosaurus), resolvido com esta função js, chamando - o na carga do documento e redimensionando:

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

score 3 · Answer 5

Se não conseguir alterar a disposição 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>

Demo: http://www.bootply.com/tVkNyWJxA6

score 1 · Answer 6

Desculpa, também devias ter pedido a tua css. Como é, basicamente o que você precisa olhar é dar ao seu container div o estilo {[[0]} em seu css e, em seguida, as divs fechadas herdarão isso, desde que você não lhes dê sua própria largura. Também lhe faltavam algumas etiquetas de fecho, e o </center> fecha um <center> sem que alguma vez esteja aberto, pelo menos nesta secção do Código. Eu não tinha certeza se você queria a imagem no mesmo div que contém o seu conteúdo ou separado, então eu criei dois exemplo. Eu mudei a largura do img para 100px simplesmente porque jsfiddle oferece uma pequena área de visualização. Avisa-me se não for o que procuras.

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

Conteúdo e imagem no mesmo div (img à esquerda): http://jsfiddle.net/QvqKS/3/

score 0 · Answer 7

Eu ia perguntar por que alguém iria tentar "substituir" a largura do recipiente, pois a sua finalidade é para manter o seu conteúdo com algum preenchimento, , mas eu tive uma situação semelhante (é por isso que eu queria compartilhar a minha solução, mesmo que lá está respostas).

Na minha situação, eu queria ter todo o conteúdo {[[10]}(de todas as páginas) dentro de um recipiente, então este era o pedaço de código da minha _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 Home Index, eu tinha um cabeçalho de fundo imagem que eu gostaria de preencher toda a largura do ecrã, por isso a solução era fazer o índice.cshtml como este:

@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 isto é melhor do que tentar fazer workarounds, uma vez que seções são feitas com o propósito de permitir (ou forçar) vistas para substituir dinamicamente algum conteúdo no layout.

score 0 · Answer 8

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

score 0 · Answer 9

A resposta que se segue não é exactamente a melhor de todas, mas precisava de algo que mantivesse a sua posição dentro do recipiente enquanto estica completamente o mergulhador interior.

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

score 0 · Answer 10

Em vez de

style="width:100%"

Tenta usar

class="col-xs-12"

Isso irá poupar-te 1 carácter:)

0

Author: Yevgeniy Afanasyev, 2017-12-05 05:40:36