web-dev-qa-db-fra.com

Bootstrap Envoie le contenu div à la nouvelle ligne

D'une manière ou d'une autre, je ne sais pas comment finir mon code qui est formaté en liste et que je dois formater aussi en tant que grille, qui est commuté par javascript.

Mon code HTML ci-dessous est utilisé pour lister un contenu

<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>

Le code CSS pour la liste. Tous les autres CSS sont pris par bootstrap

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

Le même code devrait être utilisé pour montrer grille

<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>

Le CSS pour la grille

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

Les 19,4% pour chaque partie de la galerie gardent les DIV à côté. Cela ne le poussera pas vers une nouvelle ligne. Comment pourrais-je le résoudre?

htmlcsscss3twitter-bootstrap
31
karadayi

Faire une rangée div.

Comme ça

<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>
76
Krsto Jevtic