100% Breite Twitter Bootstrap 3 Vorlage

134

Ich bin ein Bootstrap-Neuling und habe eine 100% breite Vorlage, die ich mit Bootstrap codieren möchte. Die erste Spalte beginnt in der linken Ecke und ich habe eine Google-Karte, die sich ganz rechts erstreckt. Ich dachte, ich könnte das mit container-fluidUnterricht machen, aber das scheint nicht mehr verfügbar zu sein. Ich habe keine Ahnung, wie ich dieses Layout mit Bootstrap 3 erreichen kann. Ich verwende die Geometry PSD-Vorlage von themeforest, den Link hier, wenn Sie das Layout sehen möchten: http://themeforest.net/item/geometry-design-for- geolocation-social-networkr / 4752268

html css twitter-bootstrap layout twitter-bootstrap-3 Samia Ruponti
quelle
5
Sie können Bootstrap so anpassen, dass die @container-*Breite 100% beträgt . Auch .container-fluidkommt wieder in 3.1.0. :)

Antworten:

247

Für Bootstrap 3 müssten Sie einen benutzerdefinierten Wrapper verwenden und dessen Breite auf 100% festlegen.

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

Hier ist ein Arbeitsbeispiel für Bootply

Wenn Sie keine benutzerdefinierte Klasse hinzufügen möchten, können Sie ein sehr breites Layout (nicht 100%) erzielen, indem Sie alles in eine col-lg-12( breite Layout-Demo ) einbinden.

Update für Bootstrap 3.1

Die container-fluidKlasse wurde in Bootstrap 3.1 zurückgegeben, sodass hiermit ein Layout in voller Breite erstellt werden kann (kein zusätzliches CSS erforderlich).

Bootstrap 3.1 Demo

Zim
quelle
13
Du musst vorsichtig sein. Die Zeile hat links und rechts einen Rand von -15 Pixel. Dies wird durch den Container mit einer 15px-Polsterung ausgeglichen. Der beste Weg ist, diese Auffüllung zu Ihrem Container hinzuzufügen und dann Zeilen und Spalten zu verwenden, um Ihr Raster zu erstellen.
Rootman
6
@rootman Ich benutze class = "container container-full" und das scheint zu funktionieren.
Kenmore
Verwenden Sie Behälterflüssigkeit zusammen mit einem col-md-12, um eine Reihe in voller Größe zu erhalten. Es wird eine Rinne (Standard 15px auf jeder Seite) geben, die entfernt werden muss. Am einfachsten ist es, es manuell zu entfernen, indem Sie das folgende benutzerdefinierte CSS verwenden: #SomeId div {padding-left: 0; Polsterung rechts: 0; }
Martin
2
Danke für den Tipp ... Behälterflüssigkeit hat bei mir gut funktioniert, keine weiteren Änderungen erforderlich. Die Rinne stellte kein Problem dar, da durch Festlegen der Hintergrundfarbe der enthaltenen Klasse die Farbe wie gewünscht an den Rändern gerendert wurde, während der Text und andere Elemente auch wie gewünscht leicht versetzt waren.
Krishna Gupta
30

Dies ist die vollständige Grundstruktur für ein Layout mit 100% Breite in Bootstrap v3.0.0 . Sie sollten Ihre nicht <div class="row">mit containerKlasse einwickeln . Die Cause- containerKlasse benötigt viel Spielraum und bietet kein Layout im Vollbildmodus (100% Breite), in dem Bootstrap die Container-Fluid- Klasse aus der Mobile-First-Version v3.0.0 entfernt hat.

Beginnen <div class="row">Sie einfach mit dem Schreiben ohne Containerklasse und Sie können mit einem Layout mit 100% Breite beginnen.

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

Um das Ergebnis selbst zu sehen, habe ich eine Bootply erstellt. Sehen Sie dort die Live-Ausgabe. http://bootply.com/82136 Und das komplette grundlegende Bootstrap 3-Layout mit 100% Breite habe ich erstellt. Sie können das verwenden. Holen Sie sich das Wesentliche von hier

Antworte mir, wenn du weitere Hilfe brauchst. Vielen Dank.

Shaharia Azam
quelle
20
Diese Lösung fügt aufgrund des Randes in .row eine horizontale Bildlaufleiste in FF hinzu. In den Bootstrap-Dokumenten heißt es, dass .row aus diesem Grund immer in einem Container verwendet werden sollte. Personen, die vollständig flüssige Layouts erstellen möchten (dh Ihre Site erstreckt sich über die gesamte Breite des Ansichtsfensters), müssen ihren Rasterinhalt in ein enthaltendes Element mit Auffüllung: 0 einschließen 15px; um den Rand auszugleichen: 0 -15px; wird auf .rows verwendet. - getbootstrap.com/css/#grid-intro
nealio82
5
Nealio ist richtig. Sie sollten immer noch einen Container verwenden. Ich verpacke meine Zeilen voller Breite in einen .container-full mit dieser CSS-Deklaration:.container-full { padding: 0 15px; }
tbeseda
3
Dies scheint ein Fehler im Bootstrap zu sein. Ich habe es gelöst, indem ich dem Containerelement, in dem Ihre Vollbildzeilen platziert sind, Folgendes hinzugefügt habe: padding: 0 15px; Rand links: 0px; Rand rechts: 0px;
Jorre
2
Müssen nicht alle .rows in einem enthalten sein .container?
Skube
2
Erik Flowers hat einen großartigen Artikel über die Beziehung zwischen Container und Zeile geschrieben. Ich empfehle, ihn zu lesen!
Leerlauf
27

Mit Bootstrap 3.3.5 und .container-fluidbekomme ich auf diese Weise die volle Breite ohne Dachrinnen oder horizontales Scrollen auf dem Handy. Beachten Sie, dass dies .container-fluidin 3.1 wieder eingeführt wurde.

Volle Breite auf Handy / Tablet, 1/4 Bildschirm auf dem Desktop

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

Volle Breite bei allen Auflösungen (Mobil, Tisch, Desktop)

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

Sie haben Recht div.container-fluidund Sie brauchen auch ein div.rowKind. Dann muss der Inhalt ohne Rasterspalten darin platziert werden. Wenn Sie sich die Dokumente ansehen, finden Sie diesen Text:

  • Die Reihen müssen in einem Behälter (feste Breite) oder einer Behälterflüssigkeit (volle Breite) platziert werden, um eine ordnungsgemäße Ausrichtung und Polsterung zu gewährleisten.
  • Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.

Wenn Sie keine Rasterspalten verwenden, ist dies in Ordnung, wie hier angegeben:

  • Der Inhalt sollte in Spalten platziert werden, und nur Spalten dürfen unmittelbare untergeordnete Elemente von Zeilen sein.

Wenn Sie sich dieses Beispiel ansehen, können Sie diesen Text lesen:

Einspaltig in voller Breite : Für Elemente in voller Breite sind keine Rasterklassen erforderlich.

Hier ist ein Live-Beispiel, das einige Elemente mit dem richtigen Layout zeigt. Auf diese Weise benötigen Sie kein benutzerdefiniertes CSS oder Hack.

gerardnll
quelle
5

In BOOTSTRAP 4 können Sie verwenden

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

... wenn Sie nur eine .row ohne die .m-0 als Div der obersten Ebene verwenden, haben Sie einen unerwünschten Rand, der die Seite breiter als das Browserfenster macht und eine horizontale Bildlaufleiste verursacht.

Felix
quelle