bootstrap 3 in voller Breite Bild-und div-container

Ich versuche mit einigen divs zu width: 100% auf Twitter Bootstrap-3 (darunter keine Polster oder Ränder).

JSfiddle: http://jsfiddle.net/rq9ycjcx/

HTML:

<div class="container">
    <header>
        <div class="row">
            <div class="col-md-2">
                <img src="http://placehold.it/150x50">
            </div>
            <div class="col-md-10">Menu</div>
        </div>
        <div class="row gray">
            <div class="col-md-6">
            <h1>Page Title</h1>
            </div>
            <div class="col-md-6">
                <div class="breadcrumbs">Main page > page </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
            <img src="http://placehold.it/350x150" />
            </div>    
        </div>    
    </header>

    <footer>
    <div class="row">
        <div class="col-md-12">Content</div>
    </div>
    <div class="row dark">
        <div class="col-md-3">Footer 1</div>
        <div class="col-md-3">Footer 2</div>
        <div class="col-md-3">Footer 3</div>
        <div class="col-md-3">Footer 4</div>
    </div>
    </footer>    
</div>
  1. Was ist der richtige Weg, um Bild http://placehold.it/350x150 width: 100%, auch keine Polster oder Margen?
  2. Seite Titel und breadcrumbs Höhe ist 80px.
    Wenn ich die Größe Fenster, um den kleineren Bildschirm (z.B. mobile), text Main page > page verschwindet (es ist irgendwo, aber nicht auf eigenen Zeile).
    Wie es zu lösen ist?

InformationsquelleAutor Lari13 | 2014-08-17

  1. 8

    Wie oben vorgeschlagen, können Sie eine helper-Klasse

    .padding-0 {
    padding: 0;
}

    und wenden Sie es auf alle HTML-Elemente, für die Sie müssen ein padding-reset. Also in deinem Fall, würde es so Aussehen:

    <div class="row">
    <div class="col-md-12 padding-0">
        <img src="http://placehold.it/350x150" />
    </div>    
</div>

    Für das zweite problem, setzen Sie height von .gray Klasse auto :

    @media () {
    .gray {
        height: auto;
    }
}

    Hinweis: könnte Man auch entfernen line-height: 80px es optional 🙂

    http://jsfiddle.net/rq9ycjcx/8/

    Zweite problem ist nicht gelöst 🙁 ich brauche das page title und breadcrumbs stack vertikal hintereinander, wenn kleine Bildschirm. Aber ich weiß nicht, wie man mit height auf größeren Bildschirm. Sollte ich media queries zu entfernen height auf kleinen Bildschirmen?
    Ich veränderte meinen die meisten, sorry, habe ich falsch verstanden, dachte du willst Sie, eine neben der anderen.

    InformationsquelleAutor Davion

  2. 9

    Verwenden <div class="container-fluid">. Als pro-Bootstrap Docs: Verwenden .container-fluid für eine volle Breite-container, das sich über die gesamte Breite des Viewports.

    Es wird 0-Polsterung auf container-fluid.

    In Ihrem code, den Sie haben, was scheint zu sein body Inhalte in Ihrem header und Sie haben auch eine div class="container" außerhalb Ihres header und footer. Dies ist nicht korrekt, sollten Sie Ihren container/container-fluid inneren des Körpers. Auch für Ihre header, die Sie verwenden sollten <nav="nav navbar-nav">.

    Aktualisiert Fiddle

    Sie sind gerade mischen alles. Der Antragsteller versucht, die Größe eines Bildes in eine Spalte, es gibt nichts, um sich mit der container-Größe. Über den header-tag, bezieht sich auf w3schools : - Die <header> - element gibt einen header für ein Dokument oder einen Abschnitt. - Die <header> - element sollte verwendet werden, die als container für die einführenden Inhalte. - Sie können etliche <header> - Elemente in einem - Dokument.

    InformationsquelleAutor Dan

  3. 1

    Es gibt keine "richtige" Art und Weise zu tun, die in der Bootstrap-3. Es heißt, Sie haben zum zurücksetzen Polsterung für die genaue Spalte.

    Sie können eine Klasse erstellen wie diese:

    .col-md-12.resetPadding { padding:0px }

    Über Main page > page verschwinden, ich sehe nicht das problem auf meinem Browser (getestet auf Chrome und FF), aber Sie haben line-height: 80px es und als Sie sagte, dass Ihre breadcrumbs div height: 80px;, so versuchen Sie, zu reduzieren line-height Eigenschaft und sehen, wie es funktioniert.

    Ich denke, es wird nicht funktionieren, bis u tun .col-md-12.resetPadding { padding:0px !wichtig }
    Nein, die bootstrap-nicht verwenden !wichtig dort. So können Sie überschreiben es easly {padding:0px}.
    es ist eine "richtige" Art und Weise, es zu tun, es ist durch die Verwendung container-fluid statt container
    container-fluid noch Polstern er zurückgesetzt werden müssen.

    InformationsquelleAutor Kamil

  4. 0

    Eine einfache Möglichkeit wäre zum entfernen der <div class="col-md-12">...</div> und fügen Sie Ihre Inhalte direkt in die Zeile tag. Die tag Zeile entfernt die Links & rechts-Rinnen, in der Erwägung, dass die kalt-md-12 im wesentlichen fügt der Rinnen zurück.

    Den Bootstrap-3-Dokumentation sagt, dass für eine einzige volle Breite Elemente, die Sie brauchen keine markup, wie zB nur wickeln Sie es in <p> - tags. Allerdings wird dies zeigen die 15px Dachrinnen aufgrund der markup der Seite. So, indem Sie einfach in die row - tag und platzieren Sie Ihre Inhalte direkt in diesem erhalten Sie 100% Breite Inhalt und kompatibel mit den BS3-Dokumentation.

    InformationsquelleAutor Phill Healey

Schreibe einen Kommentar