it-swarm.com.de

BootStrap 3-Behälter in Behälterflüssigkeit

Unten ist das Layout, an dem ich mit BootStrap3 arbeite. Ich habe ein Setup-Beispiel mit eingeschränktem Layout für diese Frage unter http://jsfiddle.net/s7Rwj/4

WebSite Layout

Es fällt mir schwer, meinen Header einzurichten. Ich verwende Containerfluidbreite, also die Breite meines Headers ist 100%. Die Frage ist jedoch, dass von drei Elementen im Header links und rechts davon jeweils links und rechts neben dem "Container" stehen sollten.

Bisher habe ich verschiedene Layouts ausprobiert, aber unten ist das einzige, das dem entspricht, was ich suche.

    <header class="container-fluid navbar-fixed-top">
        <div class="row">
            <div class="col-xs-12" style="background-color:aliceblue">                    
                <div class="container">
                    <div class="row">
                        <div class="col-xs-6" style="background-color:Violet">2</div>
                        <div class="col-xs-6 pull-right" style="background-color: lightblue">3</div>
                    </div>
                </div>
                <span style="position:absolute;top:0;left:0">
                    A quick brown fox jumps over the lazy dog.
                </span>
            </div>
        </div>
    </header>

Die Herausforderung bei diesem Layout besteht jedoch darin, dass der Text das zweite Element im Header überschneidet, da der Bereich die absolute Position verwendet, wenn der Browser die Größe des Browsers ändert. Ich habe bereits versucht, explizite Breite anzugeben, aber es hat nicht geholfen.

Wenn ich keine absolute Position verwende, werden der Bereich und der Rest der Elemente in zwei verschiedenen Zeilen dargestellt.

Ich bin auf der Suche nach Ratschlägen zum Einrichten dieses Headers. 

PS: Ich habe dem div-Tag zufällige Hintergrundfarben hinzugefügt, um zu verstehen, wo sie gerendert werden. Fühlen Sie sich frei, sie zu ignorieren. 

33
ndd

Ich denke, du suchst nach Schwierigkeiten, wo sie nicht sind.

Sie sollten das Verschachteln von Containern (.container und .container-fluid) vermeiden, da diese aufgrund ihrer Polsterung usw. nicht verschachtelbar sind. siehe Bootstrap 3 Containerübersicht

Wenn Sie Spalten verschachteln, müssen Sie lediglich eine neue Zeile in eine Ihrer Spalten einfügen und die verschachtelten Spalten direkt in diese einfügen. Siehe Bootstrap 3 Grid-System - Spalten verschachteln , hier ist ihr Beispiel:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Die Lösung, die Sie für Ihr Layout suchen, ist sehr einfach. Sie brauchen nicht unbedingt Behälterflüssigkeit im Kopf. Erstellen Sie einfach einen Container für das Mittelteil über dem Karussell und wickeln Sie ihn in eine .wrap-Datei oder eine andere Klasse, die Sie mit der Breite 100% stylen können. Zusätzlich können Sie die Polsterung der Behälterflüssigkeit hinzufügen.

<header class="wrap navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-6" style="background-color: Violet;">2</div>
            <div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
        </div>
        <span style="position:absolute;top:0;left:0">
            A quick brown fox jumps over the lazy dog.
        </span>
    </div>
</header>

Und irgendwo in Ihrem CSS (ich empfehle style.less) können Sie .wrap auf 100% Breite formatieren, obwohl dies die Standardbreite für jedes Div ohne Stile sein sollte.

.wrap {
    width: 100%;
}

Ich weiß, dass diese Frage ein bisschen älter ist, aber es spielt keine Rolle. Hoffe ich habe deine Frage richtig verstanden.

52
TeeJay

Ich sehe eigentlich kein Problem bei der Verwendung des Bootstrap-Containers, der in der Containerflüssigkeit verschachtelt ist. Ich habe dies kürzlich in einem Thema getan, das ich mit einem Seitenersteller erstellt habe. Dies ermöglichte dem Client das einfache Erstellen von Seiten mit variablen Zeilen mit fester und voller Breite mithilfe des Seitenerstellers.

Fügen Sie einfach so etwas zu Ihrem Stylesheet hinzu:

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

Das heißt, ich denke, das, was Sie versuchen, kann gelöst werden, indem Sie der ersten Spalte in der Behälterflüssigkeit etwas Polsteraufsatz hinzufügen. Um es mobil zu machen, fügen Sie diese Auffüllung in einer Medienabfrage an dem Haltepunkt hinzu, an dem der Text anfängt, sich zu überlappen. Das ist nicht die schönste Art, es zu tun, aber so würde ich es angesichts dessen, was Sie erreichen wollen, angehen.

<header class="container-fluid navbar-fixed-top">
    <div class="row">
        <div class="col-xs-12" style="background-color:aliceblue; padding-top:30px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:Violet">2</div>
                    <div class="col-xs-6" style="background-color: lightblue">3</div>
                </div>
            </div> 
            <span style="position:absolute;top:0;left:0">
                        Some text
            </span>
        </div>
    </div>
</header>

LINK: http://jsfiddle.net/udLbLwh6/

16
Opaw Nako

Ich glaube, das Verschachteln von Containern ist vollkommen in Ordnung. Solange Sie die Polsterung am .container im Inneren von .container-fluid (.container-fluid .container {padding: 0;}) entfernen, was ist sonst noch in Ordnung?

0
user3614058