Html Bootstrap 将 div 内容推送到新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22943270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap push div content to new line
提问by karadayi
Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
不知何故，我无法弄清楚如何完成我格式化为列表的代码，并且也需要将其格式化为由 javascript 切换的网格。
My HTML Code below is used to lista content:
我下面的 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>
The CSS Code for the list. All other CSS is taken by bootstrap:
列表的 CSS 代码。所有其他 CSS 都由 bootstrap 获取：
.styled_view div.list {
padding: 0;
width: 100%;
}
The same code should be used to show grid:
应该使用相同的代码来显示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>
The CSS for the grid:
网格的 CSS：
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
画廊每个部分的 19.4% 使 DIV 紧挨着下一个。它不会将其推到新行。我怎么能解决呢？
回答by Krsto Jevtic
Do a row div.
做一行div。
Like this:
像这样：
<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>回答by Mohamed Eissa
If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
如果您的列表是用未知数字动态生成的，并且您的目标是始终将最后一个 div 放在新行中，请将最后一个 div 类设置为“col-xl-12”并删除其他类，以便它始终占据整行。
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
这是已更正的代码副本，因此最后一个 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>