css Bootstrap响应网格-始终只填充满的行

lf3rwulv 于 2023-03-20 发布在 Bootstrap

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

我有一个8个结果的列表，我呈现在响应引导网格。我想它削减的结果，不填写在整个行。
例如，现在，在中等大小的屏幕上，它显示为2行，每行有4个结果，但在较小的屏幕上，它将显示为2行，每行有2个结果，最后一行只有2个结果。我希望只显示前两整行。
如何让 Bootstrap 不显示最后一行？

let frag = '';

for (let i = 0; i < 8; i++) {
frag += `
  <div class="myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </div>
`
}

$("#myDiv").html(frag);

.myElem {
  position: relative;
  width: 200px !important;
  margin-bottom: 1rem;
}
.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>

css

来源：https://stackoverflow.com/questions/75754914/bootstrap-responsive-grid-to-fill-in-only-full-rows-always

2条答案

按热度按时间

uz75evzq1#

首先，你需要更新你的for循环，并在myElem div中添加适当的Bootstrap网格类，然后，你可以在CSS中使用媒体查询来隐藏小屏幕上的元素。

let frag = '';

for (let i = 0; i < 8; i++) {
  frag += `
    <div class="col-lg-3 col-md-6 col-sm-12 myElem">
      <div class="content">
        <p>Lorem ipsum...</p>
      </div>
    </div>
  `
}

$("#myDiv").html(frag);

.myElem {
  position: relative;
  margin-bottom: 1rem;
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

@media (max-width: 767.98px) {
  .myElem:nth-child(n+5) {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>

赞(0）回复(0）举报 2023-03-20

voj3qocg2#

你的碎片布局没有引导类。所以它们不适合你用“行”开始的网格。有了引导类，它看起来会像这样。

let frag = '';

for (let i = 0; i < 8; i++) {
frag += `
  <div class="col-12 col-md-6 col-lg-4 myElem">
    <div class="content">
      <p>Lorem ipsum...</p>
    </div>
  </div>
`
}

$("#myDiv").html(frag);

.myElem {
  margin-bottom: 1rem;
}

.content {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row myDiv" id="myDiv">
  
</div>

所以你有一行和许多列，你可以使用display classes来控制它们。像.d-md-none一样在md断点隐藏它

赞(0）回复(0）举报 2023-03-20

我来回答

css Bootstrap响应网格-始终只填充满的行

2条答案

相关问题

热门标签

最新问答