Bootstrap zentriert alle Spalten in der ganzen Zeile

Ich erstelle gerade eine Webseite mit Bootstrap und ich benutze Spalten. Meine Seite sieht wie folgt aus:Bootstrap zentriert alle Spalten in der ganzen Zeile

Ich möchte die letzte Spalte zum Zentrum (in der zweiten Reihe), aber die Seite ist dynamisch und ich weiß nicht, wie viele Container gibt.

ich diese zwei Lösungen auf Google gefunden:

1) In meine css:

.col-centered{ 
    float: none; 
    margin: 0 auto; 
}

2) Fügen Sie diese auf die Klasse Tagattribut

col-lg-offset-4

Aber Beide Lösungen sehen so aus:

Das ist nicht was ich will. Ich mag es so aussehen:

Wie kann ich das erreichen?

Quelle

2016-07-20 Aaronmacaron

Bitte geben Sie eine jsFiddle –

Die Offset-Lösung scheint zu funktionieren .. http://codeply.com/go/PBfCft4vEt – ZimSystem

@Skelly Ja, es funktioniert, wenn ich weiß, dass es genau vier Container gibt, weil ich den Offset manuell einstellen kann der vierte Behälter. Für mich funktioniert es nicht, weil meine Seite dynamisch generiert wird und ich nicht weiß, wie viele Container es gibt. – Aaronmacaron

Bootstrap Spalten standardmäßig mit CSS float Eigenschaft schwimmen. Mit float können wir Spalten nicht in der Mitte ausrichten. Aber mit display: inline-block können wir. Alles, was wir brauchen, ist float aus Stilen von Spalten zu entfernen und sie zu inline-block mit vertical-align: middle zu ändern, und Sie werden bekommen, was Sie wollen. Aber vergessen Sie nicht, zusätzlichen Platz zu entfernen, der mit inline-block geliefert wird.

Hier ist der Trick.

.wrapper { 
 
    background: green; 
 
    padding: 20px 0; 
 
} 
 

 
.box { 
 
    border-radius: 10px; 
 
    margin-bottom: 30px; 
 
    background: #fff; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 
.center-align { 
 
    letter-spacing: -4px; 
 
    text-align: center; 
 
    font-size: 0; 
 
} 
 

 
.center-align [class*='col-'] { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    letter-spacing: 0; 
 
    font-size: 14px; 
 
    float: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container center-align"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <div class="box"> 
 
      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Hinweis: Die Einstellung font-size: 0; Buchstabenabstand: -4px bei Eltern und Anwendung der Elternschriftgröße: 14px; Buchstabenabstand: 0 zurück auf untergeordnete Elemente wird Leerraum entfernen, der mit Inline-Block kommt.

Quelle

2016-07-20 15:37:22

Warum nicht einfach die '.col-md-offset- *' Bootstrap-Klasse verwenden, die die gleiche Ausgabe ohne überflüssiges Extra-Styling bietet? Schau dir meine Antwort an. – trashr0x

@ trashr0x, weil er nicht weiß, wie viele Spalten sich in der letzten Zeile befinden, da sie dynamisch generiert werden. Wir können 'col-md-offset- *' class verwenden, wenn wir sicher sind, dass es in der letzten Zeile eine oder zwei Spalten geben wird. –

Ups, verpasste diesen Teil der Anforderung! – trashr0x

Sie müssen den letzten Textblock in eine andere Zeile einfügen und die "col-md-4" in "col-md-12" ändern.

<div class="row"> 
    <div class="col-md-4"> // column 1 
     bla bla bla 
    </div> 
    <div class="col-md-4"> //column 2 
     bla bla bla 
    </div> 
    <div class="col-md-4"> // column 3 
     bla bla bla 
    </div> 
</div> 
<div class="row"> 
    <center> 
    <div class="col-md-12"> //last column, also note I changed it to 12 
     bla bla bla 
    </div> 
    </center> 
</div>

Quelle

2016-07-20 14:22:48 tsmetska

Bootstrap verfügt über eine integrierte Funktionalität, um das gewünschte Layout ohne die Einführung zusätzlicher CSS-Regeln zu erreichen. Verwenden Sie einfach die .col-md-offset-* Klasse:

Verschieben Spalten rechts mit .col-md-offset-* Klassen. Diese Klassen erhöhen den linken Rand einer Spalte um * Spalten. Beispiel: .col-md-offset-4 verschiebt .col-md-4 über vier Spalten.

Ihr Layout würde am Ende der Suche ähnliches dies:

.show-grid { 
 
    margin-bottom: 15px; 
 
} 
 

 
.your-custom-div { 
 
    height: 50px; 
 
    background-color: green; 
 
    color: white; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

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

 
<body> 
 
    <div class="container"> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    <div class="row show-grid"> 
 
     <div class="col-md-4 col-md-offset-4"> 
 
     <div class="your-custom-div"> 
 
      .col-md-4 .col-md-offset-4 
 
     </div> 
 
     </div> 
 
     <div class="clearfix visible-md"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 
    
 
</html>

EDIT # 1: Für Ihre Anforderung nicht zu wissen, wie viele Spalten, die Sie aus Ihrer Datenbank werden Holen für die zweite Zeile, eine andere Option wäre, eine Bedingung während der Ausgabe des HTML zu verwenden, um auch eine .col-md-offset-4 Klasse auszugeben, wenn der Modulo der Anzahl der Elemente in Ihrer Sammlung dividiert durch die Anzahl der Spalten gleich 1 ist, oder proce wie sonst üblich. In ASP.NET mit Razor würde dies in etwa so aussehen (das unten stehende Beispiel wird absichtlich einfach gehalten, um die vorgeschlagene Logik zu demonstrieren, es kann auf seine eigene HTML-Hilfsklasse umgestaltet werden, die auch andere Spaltengrößen berücksichtigt):

@{ 
    bool lastItemShouldBeCentered = Foo.Count % 3 == 1; 
    for (int i = 0; i < Foo.Count; i++) 
    { 
     bool isLastItem = i == Foo.Count - 1; 
     if (isLastItem && lastItemShouldBeCentered) 
     { 
      <div class="col-md-4 col-md-offset-4"> 
       // Foo[i] content here 
      </div> 
     } 
     else 
     {     
      <div class="col-md-4"> 
       // Foo[i] content here 
      </div> 
     } 
    } 
}

EDIT # 2: Sieht aus wie ich Ihre Anforderung falsch gelesen habe. Für eine übriggebliebene Spalte reicht diese Lösung aus. Für mehr würde ich mit @ Muhammads Antwort gehen.

Quelle

2016-07-20 15:55:37 trashr0x

Bootstrap zentriert alle Spalten in der ganzen Zeile

Antwort

Verwandte Themen