Dynamische Mitte div Bootstrap

Ich versuche, eine ansprechende div Liste zu erstellenDynamische Mitte div Bootstrap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
</div>

Wie Sie sehen können, von oben i vier divs haben und wenn ich habe nur 3 divs, sie wird in links

Ist es möglich, es dynamisch zu tun, wenn es nur 3 div gibt und sie zentriert werden?

Wenn ja, wie kann ich das tun. Vielen Dank im Voraus und Entschuldigung für mein schlechtes Englisch

Quelle

2017-11-14 YVS1102

Zentriert du meine diese 3 werden in der gleichen Reihe sein und ist zentriert? – Swellar

@Swellar Ja, das ist was ich meine – YVS1102

Sie sagen 'dynamisch'. Fügen Sie die divs auf dem Server oder mit jQuery hinzu oder entfernen Sie sie? Wenn dies der Fall ist, müssen Sie wahrscheinlich die entsprechenden Klassen basierend auf der Anzahl der angezeigten Divs hinzufügen. Sie sollten die Antwort von @goose anpassen können. – Phil

Um zu testen, zu versuchen, eine Spalte zu entfernen verwenden.

für alle Auflösungen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<style> 
 
.col-xs-6:first-child:nth-last-child(3), 
 
.col-xs-6:first-child:nth-last-child(3) ~ .col-xs-6 { 
 
    width: 33.3%; 
 
} 
 
</style>

für Mobile Auflösung Nur:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<style> 
 
@media (max-width:767px) { 
 
    .col-xs-6:first-child:nth-last-child(3), 
 
    .col-xs-6:first-child:nth-last-child(3) ~ .col-xs-6 { 
 
     width: 33.3%; 
 
    } 
 
} 
 
</style>

Erläuterung:

`.col-xs-6:first-child:nth-last-child(3)`

für die Spalte, die die erste Spalte, und auch den 3. aus der letzten Spalte

, .col-xs-6:first-child:nth-last-child(3) ~ .col-xs-6

und für alle angrenzenden Geschwister der Säule ist (jede Spalte, die danach kommt)

width: 33.3%;

nehmen Sie 1/3 der Breite.

Wenn es 4 oder mehr Spalten gibt, oder weniger als 3 Spalten, kann das erste Kind nicht 3. von der letzten sein, also ändern wir nur die Breite, wenn es 3. Kein flexbox benötigt (obwohl ich flexbox liebe), Keine Polyfills benötigt, keine BS.

Quelle

2017-11-16 20:10:57 Afrophysics

Was ist, wenn es nur zwei gibt? – YVS1102

Dann nehmen sie jeweils 50% der Reihe ein und bleiben zentriert. Gibt es eine zusätzliche Funktionalität, die du willst, wenn es nur 2 gibt? – Afrophysics

Wenn ich die Frage richtig verstehe, sollte die Änderung col-sm-6 und col-xs-6 zu -4 Ihnen das Verhalten geben, das Sie möchten. Falls nicht, können Sie diese Antwort kommentieren und erklären, wie Sie es aussehen lassen möchten.

<div class="container"> 
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4"> 
    <a href="#"> 
     <img src="https://dummyimage.com/250x250/000/fff"> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4"> 
    <a href="#"> 
     <img src="https://dummyimage.com/250x250/000/fff"> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4"> 
    <a href="#"> 
     <img src="https://dummyimage.com/250x250/000/fff"> 
    </a> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-4"> 
    <a href="#"> 
     <img src="https://dummyimage.com/250x250/000/fff"> 
    </a> 
    </div> 
</div>

Quelle

2017-11-16 14:45:03 Goose

Verwenden Sie eine Flexbox für .container. Wenn Sie justify-content: center verwenden, wird es in der "row" zentriert.

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 

 
</div>

Quelle

2017-11-16 14:46:16 Gerard

Wenn Sie Bootstrap 4 aktualisieren Sie können es wie folgt tun:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style type="text/css">.col {background: #555; border: 2px solid #fff; color: #fff;}</style> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col">column 1</div> 
 
     <div class="col">column 2</div> 
 
     <div class="col">column 3</div> 
 
     <div class="col">column 4</div> 
 
    </div> 
 
</div>

so wie viele .col, die Sie Sie hinzufügen, werden immer Lass sie zentriert werden.

Bootstrap 4 verwendet Flexbox.

Quelle

2017-11-16 14:49:30

können Sie flex-container mit flex-wrap wie diese

.my-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container my-container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
 
    <a href="#"> 
 
     <img src="https://dummyimage.com/250x250/000/fff"> 
 
    </a> 
 
    </div> 
 

 
</div>

Quelle

2017-11-16 14:51:05

Ich hatte das gleiche Problem. Einfache Sache, die ich hinzufügen Container-Fluid-Klasse in div

Versuchen Sie dies kann Ihr Problem lösen.

Quelle

2017-11-19 11:26:24

Dynamische Mitte div Bootstrap

Antwort

Verwandte Themen