Bootstrap Grid Spaltenauffüllung anders auf div Tags angewendet

Ich benutze Bootstrap für eine einfache persönliche Website und versuchen herauszufinden, warum die CSS-Regel für das Auffüllen von Spalten sich auf verschiedene divs unterschiedlich anwendet. Bitte beachten Sie diese fiddle für die HTML-und CSS - Sie können sehen, die weiße div unterhalb der über mich Panel ist breiter. Sie haben die gleichen Spaltenklassen, so dass ich nicht erkennen kann, warum sie sie anders beeinflussen würden. HierBootstrap Grid Spaltenauffüllung anders auf div Tags angewendet

ist die HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row name-header"> 
 
    <span class="col-xs-12">Tracy King</span> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>About Me</p> 
 
    </div> 
 
    </div> 
 
    <div class="content-panel col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
 
     doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
 
     veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim 
 
     ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 
 
     consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque 
 
     porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci 
 
     velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
 
     magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum 
 
     exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 
 
     consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
 
     esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo 
 
     voluptas nulla pariatur?"</p> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Code Samples</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Sample Apps</p> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-12 col-lg-8 col-lg-offset-2"> 
 
    <div class="row-panel"> 
 
     <p>Other Projects</p> 
 
    </div> 
 
    </div> 
 
</div>

Es gibt einige benutzerdefinierte CSS-I in der Geige enthalten. Ich dachte, es könnte hilfreicher sein, es dort anzuschauen, aber ich kann es bei Bedarf auf meine Frage übertragen. Danke im Voraus. Jeder Einblick wird sehr geschätzt!

Quelle

2016-03-20 tracyak13

Sie sind die gleiche Breite. Es ist nur so, dass das weiße div eine Hintergrundfarbe hat und das über mich div nicht. Hintergrundfarbe wird auf das Padding angewendet. Es gibt die Illusion, dass das weiße div breiter ist, aber wenn Sie sie durch ein Browser-Inspektor-Tool betrachten, werden Sie sehen, dass sie die gleiche Breite haben. –

Nichts ist falsch mit Ihrem Code, wenden Sie 'content-panel' auf jedes div an und Sie werden das' padding' sehen, von dem Sie sprechen [Fiddle] (https://jsfiddle.net/mxtxcqas/) – dippas

Ich sehe - wenn ich füge die content-panel-Klasse zu einem div innerhalb des div hinzu, das meine Spalten aufruft, es ist die Breite, auf die ich gehofft hatte. Danke, dass du es angerufen hast! – tracyak13

vorsichtig sein, wenn Sie jemals COL- * Klassen sind u setzen Reihe div bevor sie

Beispiel

<div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    <div class="col-md-12 col-lg-4"></div> 
</div> 

<div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
</div>

im Grunde die Reihe div negative Marge aufweist, die Appretur einstellen Dein Col Div.

so müssen Sie Standardstruktur Bootstrap dh

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    <div class="col-md-12 col-lg-4"></div> 
    </div> 

    <div class="row"> 
    <div class="col-md-12 col-lg-8"></div> 
    </div> 
</div>

in Ihrem Fall verwenden u nicht verwenden Reihe div nach Name-header Klasse div dass mit Polsterung

Quelle

2016-03-20 11:59:41

Ausgabe erscheinen Vereinbaren Sie mit Antwort gegeben von Ismail Farooq.

Es gibt eine definierte Struktur im Bootstrap. Einige Grundregeln:

1) In Behälter/Behälter-Flüssigkeit-Klasse vor Zeile Klasse

2) Reihe Klasse vor jeder COL- * Klasse

3) Auch für verschachtelte COL- * hinzufügen, fügen Reihe vor col- *

Quelle

2016-03-20 13:28:08 Vinaya

Bootstrap Grid Spaltenauffüllung anders auf div Tags angewendet

Antwort

Verwandte Themen