Center-Bootstrap-Spalten

Ich versuche, meine Spalten im Bootstrap zu zentrieren, damit sie gleichmäßig verteilt sind. Ich habe jede Spalte auf col-lg-4 gesetzt, so dass es maximal 3 Spalten pro Zeile gibt. Also, wenn es 5 Spalten, sollten die Zeilen wie folgt aussehen:Center-Bootstrap-Spalten

col1  col2  col3 
    col4  col5

Wenn es vier Spalten, sollten sie wie folgt aussehen:

col1  col2  col3 
      col4

Wenn 2, sollten sie wie folgt aussieht:

 col1  col2

Ich hoffe, es macht Sinn. Ich habe die einschließenden Zeile display: table gesetzt und jede Spalte

{ 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: auto 0; 
}

Aber aus irgendeinem Grund, nicht die Spalten nicht zentriert und sind links ausgerichtet. Kann mir bitte jemand helfen? Siehe eingefügten Code.

.bd-centered { 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: auto 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <title>JS Bin</title> 
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
    <div style="display: table;"> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
      <h6 class="text-center breakdown-figures"><span class="glyphicon icon-five text-primary" aria-hidden="true"></span> 70%</h6> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
      <h6 class="text-center breakdown-figures"><span class="glyphicon icon-four text-success" aria-hidden="true"></span> 10%</h6> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
      <h6 class="text-center breakdown-figures"><span class="glyphicon icon-three text-muted" aria-hidden="true"></span> 10%</h6> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
      <h6 class="text-center breakdown-figures"><span class="glyphicon icon-two text-warning" aria-hidden="true"></span> 10%</h6> 
 
     </div> 
 
     <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
      <h6 class="text-center breakdown-figures"><span class="glyphicon icon-one text-danger" aria-hidden="true"></span> 20%</h6> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2016-08-04 user1038814

Nur ein Gedanke. Sie können JavaScript verwenden, um die Bootstrap-Klassen basierend auf der Anzahl der Divs dynamisch zu ändern. Es sei denn, Sie möchten natürlich kein Javascript verwenden. (was Ihre Tags vorschlagen) Übrigens macht das Schreiben von class = "col-xs-4" genau dasselbe wie class = "col-lg-4 col-md-4 col-sm-4 col-xs-4". – RMo

@ user1038814: Überprüfen Sie meine Antwort, wie ich glaube, dass es hält, was Sie wollen. – Arif

Hier ist, was Sie wollenFiddle OUTPUT:

col1  col2  col3 
    col4  col5

Wenn es 4 Spalten sind, sollten sie wie folgt aussehen:

col1  col2  col3 
      col4

.bd-centered { text-align: center; 
 
display: flex; 
 
align-items: center; 
 
justify-content: center; 
 
margin: auto 0;}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    var elem = $("div.col-lg-4").length; 
 
    switch (elem % 3) { 
 
    case 1: 
 
     $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-12 col-md-12 col-sm-12 col-xs-12'); 
 
     break; 
 
    case 2: 
 
     $(".table div:nth-child(" + elem + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6'); 
 
     $(".table div:nth-child(" + (elem - 1) + ")").removeClass('col-lg-4 col-md-4 col-sm-4 col-xs-4').addClass('col-lg-6 col-md-6 col-sm-6 col-xs-6'); 
 
     break; 
 
    default: 
 
     break; 
 
    } 
 

 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    <div class="row"> 
 
<div class="table" style="display: table;"> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
          <h6 class="text-center breakdown-figures"><span class="glyphicon icon-five text-primary" aria-hidden="true"></span> 70%</h6> 
 
         </div> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
          <h6 class="text-center breakdown-figures"><span class="glyphicon icon-four text-success" aria-hidden="true"></span> 10%</h6> 
 
         </div> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
          <h6 class="text-center breakdown-figures"><span class="glyphicon icon-three text-muted" aria-hidden="true"></span> 10%</h6> 
 
         </div> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
          <h6 class="text-center breakdown-figures"><span class="glyphicon icon-two text-warning" aria-hidden="true"></span> 10%</h6> 
 
         </div> 
 
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 bd-centered"> 
 
          <h6 class="text-center breakdown-figures"><span class="glyphicon icon-one text-danger" aria-hidden="true"></span> 20%</h6> 
 
         </div> 
 
         </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-08-04 21:45:31 Arif

Ich vermute, dass Sie nicht vollständig verstehen, die Bootstrap-Grid-System ... Jede Zeile 12 Einheiten breit ist, und Sie können diese teilen sich wie Sie wählen. In Ihrem "5-Spalten-Layout" machen Sie beispielsweise zwei Zeilen: Jede Spalte in der ersten Zeile ist 4 Einheiten breit und jede Spalte in der zweiten Zeile ist 6 Einheiten breit.

Für das 5-Spalten-Layout, können Sie etwas tun:

<div class="col-xs-4">...</div> 
<div class="col-xs-4">...</div> 
<div class="col-xs-4">...</div> 
<div class="col-xs-6">...</div> 
<div class="col-xs-6">...</div>

Für das 4-Spalten-Layout:

<div class="col-xs-4">...</div> 
<div class="col-xs-4">...</div> 
<div class="col-xs-4">...</div> 
<div class="col-xs-12">...</div>

Für das 2-Spalten-Layout:

<div class="col-xs-6">...</div> 
<div class="col-xs-6">...</div>

Quelle

2016-08-04 21:52:19 Cameron

Ich glaube, dies ist der richtige Weg, dies zu tun, ohne irgendwelche Bootstrap-Klassen zu ändern oder zu überschreiben. – Quiver

Antwort

Verwandte Themen