css Bootstrap 将div内容推到新行

brc7rcf0 于 2023-02-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(158)

不知何故，我不能摆脱如何完成我的代码，我格式化为一个列表，并需要格式化为网格太多，这是由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紧挨着下一部分。它不会把它推到一个新的行。我怎么解决这个问题呢？

css

来源：https://stackoverflow.com/questions/22943270/bootstrap-push-div-content-to-new-line

2条答案

按热度按时间

3j86kqsm1#

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

赞(0）回复(0）举报 2023-02-01

5fjcxozz2#

如果你的列表是动态生成的，并且你的目标是在一个新的行中总是有最后一个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>

赞(0）回复(0）举报 2023-02-01

我来回答

css Bootstrap 将div内容推到新行

2条答案

相关问题

热门标签

最新问答