Bootstrap spingere il contenuto div alla nuova riga

In qualche modo non riesco a capire come terminare il mio codice che ho formattato come una lista e ho bisogno di formattarlo come griglia che viene commutato da javascript.Bootstrap spingere il contenuto div alla nuova riga

mio codice HTML sottostante è utilizzato per lista un Content

<div class="list"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div> 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> 
    </div> 
</div>

il codice CSS per la lista. Tutti gli altri CSS viene acquistata da bootstrap

.styled_view div.list { 
    padding: 0; 
    width: 100%; 
}

Lo stesso codice deve essere usato per mostrare griglia

<div class="grid"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div> 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div> 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div> 
    </div> 
</div>

Il CSS per la griglia

.styled_view div.grid { 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
    width: 19.4%; 
}

Il 19,4% per ogni parte della galleria mantiene i DIV accanto al prossimo. Non lo sposterà su una nuova riga. Come potrei risolverlo?

fonte

2014-04-08 karadayi

Dov'è .styled_view? o .gallery? Puoi pubblicare qualcosa che possiamo eseguire? – LOTUSMS

EDIT: Questa potrebbe non essere la fonte del tuo problema, ma l'uso di 'col- *' non è corretto. 'col-lg-3 col-md-3 col-sm-3 col-xs-12' dovrebbe essere' col-sm-3' per esempio. Devi applicare solo una regola 'col- *' a un singolo elemento. –

Forse questo ti darà un'idea: http://bootsnipp.com/snippets/featured/list-grid-view – Jayesh

Fare una divisione div.

Ti piace questa

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> 
 
<div class="grid"> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div> 
 
     <div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div> 
 
    </div> 
 
</div>

fonte

2014-04-08 16:51:46

Bootstrap spingere il contenuto div alla nuova riga

risposta

Problemi correlati