Bootstrap đẩy nội dung div vào dòng mới

Question

Bằng cách nào đó tôi không thể tìm hiểu cách hoàn thành Mã mà tôi đã định dạng thành danh sách và cần định dạng nó thành lưới cũng được chuyển bằng javascript.

My Mã HTML dưới đây được sử dụng để danh sách một 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> 

CSS Mã cho danh sách. Tất cả CSS khác được thực hiện bởi bootstrap

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

Cùng Mã nên được sử dụng để hiển thị lưới

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

CSS cho lưới điện

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

Các 19,4% cho mỗi phần bộ sưu tập giữ các DIV tiếp theo. Nó sẽ không đẩy nó vào một dòng mới. Làm thế nào tôi có thể giải quyết nó?

Answer 1

Thực hiện một div hàng.

Như thế này

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