html - Bootstrap 将 div 内容推送到新行

Question

不知何故，我不知道如何完成我格式化为列表的代码，还需要将其格式化为由 javascript 切换的网格。

我下面的 HTML 代码用于列出一个内容:

<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 代码。所有其他 CSS 都由 Bootstrap 获取:

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

应该使用相同的代码来显示网格:

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

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

画廊每个部分的 19.4% 使 DIV 紧挨着。它不会将其推到新行。我该如何解决？

Answer 1

做一个行 div。

像这样:

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