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.

Answer 1

96

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.

css twitter-bootstrap width user1589214
źródło

Czy możesz dołączyć kod, z którym pracujesz? Bez tego mogę tylko powiedzieć, że musisz się upewnić, że tagi zawierające element div nie mają ustawionej szerokości innej niż 100%

Michael Peterson,

Hej Michael, dzięki za odpowiedź. Oto sekcja kodu, z którym pracuję:

<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

Czy możesz dołączyć kod, z którym pracujesz? Bez tego mogę tylko powiedzieć, że musisz się upewnić, że tagi zawierające element div nie mają ustawionej szerokości innej niż 100%

Michael Peterson,

Answer 3

Hej Michael, dzięki za odpowiedź. Oto sekcja kodu, z którym pracuję:

<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

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>

Answer 5

1

.row potrzebuje .container lub w tym przypadku .container-fluid.

netAction

Answer 6

1

Jeśli używasz starszej wersji arkusza stylów bootstrap container-fluid, spowoduje to poziomy pasek przewijania. Aby to naprawić, dodaj to do swojego arkusza stylów.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

Charlie

Answer 7

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.

Answer 8

3

Rzeczywiście wygląda na to, że „żaden kontener nie jest gniazdowalny” getbootstrap.com/css/#overview-container , więc spodziewaj się tutaj kilku problemów (ale myślę, że nadal będę korzystał z twojego rozwiązania).

Thibaut Barrère

Answer 9

Warto jednak zauważyć, że klasa container-fluid nie jest dostępna w bootstrap 3.0, ale jest dostępna w wersji 3.1 i nowszych

Dev

Answer 10

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/

Answer 11

1

Ta odpowiedź jest bardzo dokładna i nieugięta, że zagnieżdżanie kontenerów w innych kontenerach jest „bardzo złym pomysłem” (podobnie jak w przypadku „Pogromców duchów” złe przejście przez strumienie), a on wskazuje na stronę internetową Bootstrap, która to potwierdza. Sugestią jest umieszczenie kontenera wewnątrz prostego elementu div, a fakt, że Boostrap używa tej techniki na swoim przykładzie Jumbotron, mówi mi, że jave.web jest dzisiejszym zwycięzcą!

Volksman

Answer 12

ten przykład jumbotron usunął wszystkie moje pytania.

Alexander Kim

Answer 13

Czasami nie jest możliwe zamknięcie kontenera i otwarcie nowego pełnego kontenera. Obejście problemu. W poniższej odpowiedzi jest lepiej!

RubbelDeCatc,

Answer 14

21

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

benedex82
źródło

3

Jest to bardzo zbliżone do idealnej odpowiedzi, która nie wymaga zmiany ogólnego układu strony, a czasami będzie wystarczająca, jednak istnieją subtelne problemy z paskami przewijania. .Row-full wypełni całe okno, ignorując paski przewijania, w przeciwieństwie do kontenera-fluid, który wypełni całe okno paskami przewijania lub bez, w zależności od tego, czy pasek przewijania jest nieprzezroczysty.

Typhlosaurus

Łał. Js załatwił sprawę, godzinami szukałem rozwiązania. Mój problem polega na tym, że treść jest wprowadzana w ciągu cm i dlatego nie można zmienić zewnętrznego html. Naprawdę chciałbym wiedzieć, czy istnieje rozwiązanie bez js.

drooh

Answer 15

3

Jest to bardzo zbliżone do idealnej odpowiedzi, która nie wymaga zmiany ogólnego układu strony, a czasami będzie wystarczająca, jednak istnieją subtelne problemy z paskami przewijania. .Row-full wypełni całe okno, ignorując paski przewijania, w przeciwieństwie do kontenera-fluid, który wypełni całe okno paskami przewijania lub bez, w zależności od tego, czy pasek przewijania jest nieprzezroczysty.

Typhlosaurus

Answer 16

Łał. Js załatwił sprawę, godzinami szukałem rozwiązania. Mój problem polega na tym, że treść jest wprowadzana w ciągu cm i dlatego nie można zmienić zewnętrznego html. Naprawdę chciałbym wiedzieć, czy istnieje rozwiązanie bez js.

drooh

Answer 17

18

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/

Dina
źródło

Najlepsza odpowiedź, jeśli używasz Bootstrap 4

Alexander G,

Answer 18

Najlepsza odpowiedź, jeśli używasz Bootstrap 4

Alexander G,

Answer 19

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

Answer 20

2

Zamiast

style="width:100%"

spróbuj użyć

class="col-xs-12"

zaoszczędzi ci to 1 postać :)

Yevgeniy Afanasyev
źródło

Ta odpowiedź nie jest tym, o co prosił OP. W ten sposób kolumna będzie miała pełną szerokość zewnętrznego elementu .containerdiv, ale to nie będzie to samo, co pełna szerokość strony w przeglądarce, o to właśnie chodzi w pytaniu.

Hartley Brody

Nie widzę, aby OP zażądał „pełnej szerokości strony w przeglądarce”. Jak to rozumiesz?

Yevgeniy Afanasjew

Answer 21

Ta odpowiedź nie jest tym, o co prosił OP. W ten sposób kolumna będzie miała pełną szerokość zewnętrznego elementu .containerdiv, ale to nie będzie to samo, co pełna szerokość strony w przeglądarce, o to właśnie chodzi w pytaniu.

Hartley Brody

Answer 22

Nie widzę, aby OP zażądał „pełnej szerokości strony w przeglądarce”. Jak to rozumiesz?

Yevgeniy Afanasjew

Answer 23

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

Answer 24

W przypadku Bootstrap 4 jest to zdecydowanie najlepsza odpowiedź. Twoje zdrowie!

Metro Smurf

Answer 25

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/

Answer 26

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.

Answer 27

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.

Answer 28

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

Answer 29

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.

Element Bootstrap 100% szerokości

Odpowiedzi:

SZYBKA ODPOWIEDŹ

DALSZE INFORMACJE

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

JAK TO DZIAŁA

Sam Bootstrap używa tego samego podejścia