2016-03-21 35 views
0

Ich weiß nicht, wie man diese Art von Col 3 und 6 Größe zu machen.Bootstrap - resize spezifische Spalte

enter image description here

Mittelsäule hat keine Polsterung, aber es ist nicht genug.

Ich habe versucht, verschiedene Größen von col zu machen.

@media (min-width:992px){ 
    .col-md-6 { width: 52,5641%;} 
    .col-md-3 { width: 23,7179%;} 
} 

aber kein Erfolg.

Antwort

0

Mit Bootstrap müssen Sie nicht media queries oder Ihre eigenen width hinzufügen, verwenden Sie einfach das BS-Grid-System (you can read more here) und lassen Sie es alle harten Arbeiten zu bewältigen.

<div class="row"> 
     <div class="col-md-3">.col-md-3</div> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-3">.col-md-3</div> 
    </div> 

Stellen Sie sicher, Spalten insgesamt 12 wie oben (3 + 6 + 3) Wenn Sie zusätzliche Polsterung müssen zwischen den Spalten fügen Sie einfach eine verschachtelte DIV und: Basierend auf dem Bild ein 3-Spalten-Layout etwas wie folgt verwenden würde Wende den gewünschten Abstand auf diese an.

<div class="row"> 
     <div class="col-md-3"> 
     <div class="myclass"> 
      this will have extra padding 
     </div> 
     </div> 
     <div class="col-md-6">.col-md-6</div> 
     <div class="col-md-3">.col-md-3</div> 
    </div> 

    .myclass { 
    padding: 20px; 
    } 

Aktualisiert

Basierend auf Ihren Kommentar, wenn Sie Spalte 6 wollen etwas größer sein, als es ist müssen Sie entweder diese Spalte erweitern und „schrumpfen“ Outer 2 Spalten zu so etwas wie dieses :

<div class="row"> 
     <div class="col-md-2">.col-md-2</div> 
     <div class="col-md-8">.col-md-8</div> 
     <div class="col-md-2">.col-md-2</div> 
    </div> 

Wenn das nicht das ist, was Sie anstreben, können Sie Ihre eigene Tabelle innerhalb des Bootstrap erstellen.

Größe jeder Spalte wie Sie benötigen.

+0

Nein, Sie haben meine Frage nicht verstanden. Ich muss Spalte md-6 für gitter Größe in beiden Richtungen erweitern. Wenn ich padding-right-15px und padding-left setzen: -15px ist nicht ok;). – tine

+0

Vielen Dank für die Antworten. Ja, am Ende mache ich meinen eigenen Tisch. Ich wusste nicht, wie man das mit Bootstrap macht. – tine

+0

@tine froh, dass Sie es herausgefunden haben. Soweit ich verstehe, ist das BS-Grid-System genau das ... ein Grid-System. Wenn die vordefinierten Größen nicht für Ihre Bedürfnisse funktionieren, müssen Sie diese selbst erstellen und anpassen. – crazymatt

0

Vielleicht Bootstrap ist nicht die beste Option für Ihr Problem. Es funktioniert, wenn Sie nur den Bildschirm in 12 gleiche Teile teilen können. Wenn Sie diese Regel neu schreiben, könnten andere Dinge beschädigt werden.

Wie wäre es flexibler mit Flexboxen oder anderen CSS-Frameworks?

+0

Nein, ich muss boostrap verwenden;) – tine

+0

Gibt es in diesem Fall eine Möglichkeit, eine neue CSS-Klasse hinzuzufügen, die das Standard-Bootstrap-Verhalten außer Kraft setzt? Was ist, wenn Sie ein wenig die grüne Zone beschneiden? – AndresEC