it-swarm.com.de

100% Breite Twitter Bootstrap 3 Vorlage

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 der Klasse container-fluid Machen, aber die scheint nicht mehr verfügbar zu sein. Ich habe keine Ahnung, wie ich dieses Layout mit bootstrap erstellen kann. 3. Ich verwende die PSD-Vorlage Geometry von themeforest. Den Link hier finden Sie, wenn Sie das Layout anzeigen möchten: http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

133
Samia Ruponti

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 funktionierendes Beispiel für Bootply

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

Update für Bootstrap 3.1

Das container-fluid class 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

245
Zim

Dies ist die vollständige Grundstruktur für 100% -Breitenlayout in Bootstrap v3.0.0 . Sie sollten Ihren <div class="row"> Nicht mit der Klasse container umschließen. Ursache Die Klasse container nimmt viel Rand ein, und dies liefert kein Vollbild-Layout (100% Breite), bei dem der Container bootstrap entfernt wurde -fluid Klasse von ihrer Mobile-First-Version v3.0.0.

Beginnen Sie also einfach mit dem Schreiben von <div class="row"> 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 ein Bootply erstellt. Sehen Sie sich dort die Live-Ausgabe an. http://bootply.com/82136 Und das komplette Grundlayout bootstrap 3 100% Breite Ich habe ein Gist erstellt. Sie können das verwenden. Holen Sie sich das Gist von hier

Antworte mir, wenn du weitere Hilfe benötigst. Vielen Dank.

29
Shaharia Azam

Verwenden von Bootstrap 3.3.5 und .container-fluid, so bekomme ich volle Breite ohne Dachrinnen oder horizontales Scrollen auf dem Handy. Beachten Sie, dass .container-fluid wurde in 3.1 wieder eingeführt.

Volle Breite auf dem 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>
27
angularsen

Du hast recht mit div.container-fluid und du brauchst auch ein div.row Kind. Dann muss der Inhalt ohne Rasterspalten darin platziert werden. Wenn Sie sich die Dokumente ansehen, finden Sie diesen Text:

  • Zeilen müssen innerhalb eines Behälters (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 keine Rasterspalten verwendet werden, ist dies in Ordnung, wie hier angegeben:

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

Und wenn Sie sich this ansehen, können Sie diesen Text lesen:

Volle Breite, einzelne Spalte : Für Elemente mit 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.

20
gerardnll

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 oberste div-Ebene verwenden, wird ein unerwünschter Rand angezeigt, wodurch die Seite breiter als das Browserfenster wird und eine horizontale Bildlaufleiste angezeigt wird.

3
Sandy Maier