Element Bootstrap 100% szerokości

Question 1

Chcę tworzyć naprzemiennie kolorowe bloki w 100%. Sytuację „idealną” przedstawiono jako przywiązanie, podobnie jak sytuację obecną.

Pożądana konfiguracja:

W tej chwili:

Moim pierwszym pomysłem było utworzenie klasy div, nadanie jej koloru tła i nadanie jej 100% szerokości.

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

Jednak widać, że to oczywiście nie działa. Jest ograniczony do obszaru pojemnika. Próbowałem zamknąć pojemnik, ale to też nie zadziałało.

Question 2

containerKlasa nie jest celowo 100% szerokości. Ma różne stałe szerokości w zależności od szerokości rzutni.

Jeśli chcesz pracować na całej szerokości ekranu, użyj .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

Oto jak możesz osiągnąć pożądaną konfigurację za pomocą 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>

container-fluidCzęść zapewnia, że można zmienić tło na całej szerokości. containerCzęść zapewnia, że treść jest nadal owinięte w stałej szerokości.

To podejście działa, ale osobiście nie podoba mi się całe zagnieżdżanie. Jednak do tej pory nie znalazłem lepszego rozwiązania.

Question 4

SZYBKA ODPOWIEDŹ

Użyj wielu niezagnieżdżonych .container s
Owiń te .container które chcesz mieć tło o pełnej szerokości w plikdiv
Dodaj tło CSS do zawijającego elementu div

Skrzypce: proste: https://jsfiddle.net/vLhc35k4/ , granice kontenerów: 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*/ }

DALSZE INFORMACJE

NIE UŻYWAJ ZAGNIEŻDŻONYCH POJEMNIKÓW

Wiele osób zasugeruje ( niesłusznie ), że powinieneś używać kontenerów zagnieżdżonych.
Cóż, należy NIE .
Nie są przeznaczone do zagnieżdżania. (Zobacz sekcję „ Kontenery ” w dokumentacji)

JAK TO DZIAŁA

divjest elementem blokowym, który domyślnie rozciąga się na całą szerokość treści dokumentu - istnieje funkcja pełnej szerokości. Ma również wysokość zawartości (jeśli nie określisz inaczej).

Kontenery bootstrap nie muszą być bezpośrednimi elementami potomnymi ciała, są to po prostu pojemniki z pewną wyściółką i prawdopodobnie kilkoma stałymi szerokościami o zmiennej szerokości ekranu.

Jeśli podstawowa siatka .containerma pewną stałą szerokość, jest również automatycznie centrowana w poziomie.
Więc nie ma różnicy, czy umieścisz to jako:

Bezpośrednie dziecko ciała
Bezpośrednie dziecko podstawowego, div które jest bezpośrednim dzieckiem ciała.

Przez „podstawowy” divrozumiem, divże nie ma CSS zmieniającego jego obramowanie, wypełnienie, wymiary, pozycję lub rozmiar zawartości. Naprawdę tylko element HTML z display: block;CSS i prawdopodobnie tłem.
Ale oczywiście ustawienie CSS w stylu pionowym (wysokość, dopełnienie do góry, ...) nie powinno przerywać siatki bootstrap :-)

Sam Bootstrap używa tego samego podejścia

... Na całej swojej własnej stronie internetowej iw jej przykładzie „JUMBOTRON”:
http://getbootstrap.com/examples/jumbotron/

Question 5

Istnieje obejście problemu przy użyciu vw. Przydaje się, gdy nie możesz utworzyć nowego pojemnika na płyn. Ten element div w klasycznym „pojemniku” będzie miał pełny rozmiar.

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

Następnie pojawia się problem paska bocznego (dzięki @Typhlosaurus), rozwiązany za pomocą tej funkcji js, wywołującej ją podczas ładowania dokumentu i zmiany rozmiaru:

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

W bootstrap 4 możesz użyć klasy `` w-100 '' (szerokość i 100 jako 100%)

Dokumentację można znaleźć tutaj: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

Jeśli nie możesz zmienić układu 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

Question 8

Zamiast

style="width:100%"

spróbuj użyć

class="col-xs-12"

zaoszczędzi ci to 1 postać :)

Question 9

Czasami nie jest możliwe zamknięcie kontenera zawartości. Rozwiązanie, którego używamy, jest nieco inne, ale zapobiega przepełnieniu ze względu na rozmiar paska przewijania w przeglądarce Firefox!

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

Oto przykład: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

Przepraszamy, powinienem też poprosić o Twój plik CSS. W zasadzie to, na co musisz zwrócić uwagę, to nadanie stylowi elementu div kontenera .container { width: 100%; }w twoim css, a następnie dołączone elementy div odziedziczą to, o ile nie nadasz im własnej szerokości. Brakowało Ci również kilku tagów zamykających, a </center>zamyka <center>je bez otwierania, przynajmniej w tej sekcji kodu. Nie byłem pewien, czy chcesz, aby obraz znajdował się w tym samym elemencie div, który zawiera Twoją treść, czy też osobno, więc stworzyłem dwa przykłady. Zmieniłem szerokość img na 100px tylko dlatego, że jsfiddle oferuje mały obszar wyświetlania. Daj mi znać, jeśli to nie jest to, czego szukasz.

treść i obraz osobno: http://jsfiddle.net/QvqKS/2/

zawartość i obraz w tym samym div (img pływające po lewej): http://jsfiddle.net/QvqKS/3/

Question 11

Zastanawiałbym się, po co ktoś miałby próbować „przesłonić” szerokość kontenera, skoro ma to na celu zachowanie jego zawartości z pewnym dopełnieniem, ale miałem podobną sytuację (dlatego chciałem udostępnić swoje rozwiązanie, mimo że są odpowiedzi ).

W mojej sytuacji chciałem, aby cała zawartość (wszystkich stron) była renderowana wewnątrz kontenera, więc był to fragment kodu z mojego _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 mojej stronie Home Index miałem obraz nagłówka tła, który chciałbym wypełnić całą szerokość ekranu , więc rozwiązaniem było utworzenie pliku Index.cshtml w następujący sposób:

@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>

Myślę, że jest to lepsze niż próba obejścia tego problemu, ponieważ sekcje są tworzone w celu zezwalania (lub wymuszania) widoków na dynamiczne zastępowanie niektórych treści w układzie.

Question 12

Chociaż ludzie wspominali, że w tym przypadku będziesz musiał użyć .container-fluid, ale będziesz musiał również usunąć wyściółkę z bootstrapa.

Question 13

Poniższa odpowiedź nie jest optymalna pod żadnym względem, ale potrzebowałem czegoś, co zachowa swoje położenie w pojemniku, podczas gdy całkowicie rozciąga wewnętrzny element div.

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

Użyłbym dwóch oddzielnych elementów div „kontenera”, jak poniżej:

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

Należy pamiętać, że płyn-pojemnik nie podąża za punktami przerwania i jest to pojemnik o pełnej szerokości.