Bootstrap 将 div 内容推送到新行答案

【问题标题】：Bootstrap push div content to new lineBootstrap 将 div 内容推送到新行
【发布时间】：2014-05-21 12:24:45
【问题描述】：

不知何故，我无法弄清楚如何完成我格式化为列表的代码，并且还需要将其格式化为由 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%;
}

应该使用相同的代码来显示grid：

<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 紧挨着。它不会将其推送到新行。我该如何解决？

【问题讨论】：

.styled_view 在哪里？或.gallery？你能发布一些我们可以运行的东西吗？
编辑：这可能不是您问题的根源，但您对col-* 的使用不正确。例如，col-lg-3 col-md-3 col-sm-3 col-xs-12 应该是 col-sm-3。您只需将一个 col-* 规则应用于单个元素。
也许这会给你一个想法：bootsnipp.com/snippets/featured/list-grid-view
@Jeremy Cook.. 解决了 Grid 但现在列表需要修改:)
你的值加起来是 12 吗？现在可能是更新代码以反映您现在正在试验的内容的好时机。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案2】：

如果您的列表是使用未知数字动态生成的，并且您的目标是始终将最后一个 div 放在新行中，则将最后一个 div 类设置为“col-xl-12”并删除其他类，以便它始终占据一整行.

这是您的代码的副本已更正，因此最后一个 div 始终占据一整行（我虽然删除了不必要的类）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid">
  <div class="row">
    <div class="col-sm-3">Under me should be a DIV</div>
    <div class="col-md-6 col-sm-5">Under me should be a DIV</div>
    <div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div>
  </div>
</div>

【讨论】：