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>

Answer 2

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

这是已更正的代码的副本，因此最后一个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>

Bootstrap将div内容推送到新行

2 个答案: