100% szerokości szablonu Twitter Bootstrap 3

134

Jestem nowicjuszem w bootstrapie i mam w 100% szeroki szablon, który chcę zakodować za pomocą bootstrapa. Pierwsza kolumna zaczyna się w lewym rogu i mam mapę Google, która rozciąga się do skrajnego prawego. Pomyślałem, że mógłbym to zrobić z container-fluidklasą, ale wydaje się, że to już nie jest dostępne. Nie mam pojęcia, jak osiągnąć ten układ za pomocą bootstrap 3. Używam szablonu Geometry PSD z themeforest, link tutaj, jeśli chcesz zobaczyć układ: http://themeforest.net/item/geometry-design-for- geolocation-social-networkr / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
źródło

5

Możesz dostosować Bootstrap, aby używał @container-*szerokości jako 100%. Również .container-fluidwraca w wersji 3.1.0. :)

247

W przypadku Bootstrap 3 należałoby użyć niestandardowego opakowania i ustawić jego szerokość na 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Oto działający przykład na Bootply

Jeśli wolisz nie dodawać niestandardowej klasy, możesz uzyskać bardzo szeroki układ (nie 100%), zawijając wszystko w col-lg-12( demo z szerokim układem )

Aktualizacja dla Bootstrap 3.1

container-fluidKlasa powrócił w Bootstrap 3.1, więc to może być wykorzystywane do tworzenia pełny układ szerokość (wymagane żadne dodatkowe CSS) ..

Demo Bootstrap 3.1

Zim
źródło

13

Musisz być ostrożny. Wiersz ma marginesy z lewej i prawej strony -15 pikseli. Jest to kompensowane przez kontener, który ma wypełnienie 15 pikseli. Najlepszym sposobem jest dodanie tego wypełnienia do pełnego kontenera, a następnie użycie wierszy i kolumn, aby utworzyć siatkę.

rootman,

6

@rootman Używam class = "container container-full" i wygląda na to, że działa.

Kenmore

Użyj pojemnika-płynu razem z col-md-12, aby uzyskać rząd w pełnym rozmiarze. Będzie rynna (standardowo po 15 pikseli z każdej strony), którą należy usunąć. Najłatwiej jest usunąć go ręcznie, używając następującego niestandardowego css: #SomeId div {padding-left: 0; padding-right: 0; }

Martin

2

Dzięki za wskazówkę ... płyn w pojemniku działał dobrze, żadne inne zmiany nie są wymagane. Rynna nie stanowiła problemu, ponieważ ustawienie koloru tła zawartej klasy renderowało kolor krawędzi zgodnie z życzeniem, podczas gdy tekst i inne elementy były ładnie przesunięte, również zgodnie z oczekiwaniami.

Krishna Gupta

30

To jest kompletna podstawowa struktura dla układu o 100% szerokości w Bootstrap v3.0.0 . Nie powinieneś pakować się <div class="row">w containerklasę. containerKlasa Cause zajmie dużo marginesu i nie zapewni ci układu pełnego ekranu (100% szerokości), w którym bootstrap usunął klasę container-fluid z wersji v3.0.0 dla urządzeń mobilnych.

Więc po prostu zacznij pisać <div class="row">bez klasy kontenera i jesteś gotowy do pracy z układem o 100% szerokości.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Basic 100% width Structure</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
  <script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
</style>
</head>
<body>
    <div class="row">
        <div class="col-md-3 red">Test content</div>
        <div class="col-md-9 green">Another Content</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Aby samemu zobaczyć efekt stworzyłem bootply. Zobacz tam wyjście na żywo. http://bootply.com/82136 I kompletny podstawowy układ bootstrap 3 100% szerokości Stworzyłem streszczenie. możesz tego użyć. Uzyskaj sedno stąd

Odpowiedz mi, jeśli potrzebujesz dalszej pomocy. Dzięki.

Shaharia Azam
źródło

20

To rozwiązanie dodaje poziomy pasek przewijania w FF ze względu na margines na .row. Dokumenty bootstrap mówią, że .row powinien być zawsze używany wewnątrz kontenera z tego powodu - osoby, które chcą tworzyć w pełni płynne układy (co oznacza, że Twoja witryna rozciąga się na całą szerokość widocznego obszaru), muszą zawijać zawartość siatki w element zawierający dopełnienie: 0 15px; do wyrównania marginesu: 0-15px; używany w .row. - getbootstrap.com/css/#grid-intro

nealio82

5

Nealio ma rację. Nadal powinieneś używać pojemnika. Zawijam wiersze o pełnej szerokości w plik .container-full z tą deklaracją CSS:.container-full { padding: 0 15px; }

tbeseda

3

Wygląda na to, że jest to błąd w bootstrapie. Rozwiązałem to, dodając do elementu kontenera, w którym są umieszczone wiersze pełnego ekranu: padding: 0 15px; margin-left: 0px; margin-right: 0px;

Jorre

2

Czy nie wszystko .rowmusi być zawarte w .container?

skube

2

Erik Flowers napisał świetny artykuł na temat relacji kontener / rząd, polecam go przeczytać!

idleberg

27

Korzystanie z Bootstrap 3.3.5 i.container-fluid , w ten sposób uzyskuję pełną szerokość bez rynien i przewijania w poziomie na urządzeniach mobilnych. Zauważ, że .container-fluidzostało ponownie wprowadzone w 3.1.

Pełna szerokość na telefonie komórkowym / tablecie, 1/4 ekranu na komputerze

<div class="container-fluid"> <!-- Adds 15px left/right padding --> 
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
      <!-- Full-width for mobile -->
      <!-- 1/4 screen width for desktop -->
    </div>
  </div>
</div>

Pełna szerokość we wszystkich rozdzielczościach (mobilna, stołowa, stacjonarna)

<div class="container-fluid"> <!-- Adds 15px left/right padding -->
  <div class="row"> <!-- Adds -15px left/right margins -->
    <div>
      <!-- Full-width content -->
    </div>
  </div>
</div>

angularsen
źródło

20

Masz rację div.container-fluidi potrzebujesz div.rowdziecka. Następnie zawartość należy umieścić w środku bez żadnych kolumn siatki. Jeśli spojrzysz na dokumenty, możesz znaleźć ten tekst:

Wiersze muszą być umieszczone w .container (o stałej szerokości) lub .container-fluid (na pełnej szerokości) w celu prawidłowego wyrównania i wypełnienia.

Użyj wierszy, aby utworzyć poziome grupy kolumn.

Bez kolumn siatki jest w porządku, jak podano tutaj:

Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.

Patrząc na ten przykład, możesz przeczytać ten tekst:

Pełna szerokość, pojedyncza kolumna : dla elementów o pełnej szerokości nie są wymagane żadne klasy siatki.

Oto przykład na żywo pokazujący niektóre elementy przy użyciu prawidłowego układu. W ten sposób nie potrzebujesz żadnego niestandardowego CSS ani hackowania.

gerardnll
źródło

5

W BOOTSTRAP 4 możesz użyć

<div class="row m-0">
my fullwidth div
</div>

... jeśli użyjesz tylko .row bez .m-0 jako elementu div najwyższego poziomu, będziesz mieć niechciany margines, który rozszerzy stronę niż okno przeglądarki i spowoduje poziomy pasek przewijania.

Felix
źródło

100% szerokości szablonu Twitter Bootstrap 3

Odpowiedzi: