Bootstrap响应式网格：如何仅显示完整行，隐藏未填满的行？

首先要修正你的布局结构，给每个元素加上Bootstrap的响应式列类，这样才能正确适配不同屏幕的网格规则：

修正后的代码 #

HTML/JS部分

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

<script>
let frag = '';

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

$("#myDiv").html(frag);
</script>

CSS部分

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

注：移除了width:200px !important;，因为Bootstrap的列类会自动根据屏幕尺寸分配宽度，强制固定宽度会破坏响应式布局。

方法一：CSS媒体查询（适合固定数量的元素） #

如果你的元素数量固定，可以通过媒体查询结合CSS选择器，针对不同屏幕尺寸隐藏最后一行的不完整元素。

比如假设你有7个元素（小屏幕下最后一行仅1个），可以添加以下CSS：

/* 小屏幕（<768px）：每行2个，隐藏最后1个不满行的元素 */
@media (max-width: 767px) {
  .myElem:nth-last-child(1):nth-child(2n+1) {
    display: none;
  }
}

/* 中等屏幕（768px-991px）：每行4个，隐藏最后不满4个的元素 */
@media (min-width: 768px) and (max-width: 991px) {
  .myElem:nth-last-child(-n+3):nth-child(4n+1) {
    display: none;
  }
}

方法二：JavaScript动态处理（适合动态数量的元素） #

如果元素数量是动态变化的，用JS可以自动计算每行容量，判断最后一行是否填满，再隐藏不完整的行：

function hideIncompleteRow() {
  const container = document.getElementById('myDiv');
  const items = container.querySelectorAll('.myElem');
  if (items.length === 0) return;

  // 根据屏幕尺寸确定每行元素数量
  let itemsPerRow;
  if (window.innerWidth < 768) {
    itemsPerRow = 2;
  } else if (window.innerWidth < 992) {
    itemsPerRow = 4;
  } else {
    itemsPerRow = 4; // 大屏幕可自定义每行数量
  }

  const lastRowCount = items.length % itemsPerRow || itemsPerRow;

  // 最后一行不满则隐藏该行所有元素
  if (lastRowCount < itemsPerRow) {
    const startIndex = items.length - lastRowCount;
    for (let i = startIndex; i < items.length; i++) {
      items[i].style.display = 'none';
    }
  } else {
    // 最后一行填满则显示所有元素
    items.forEach(item => item.style.display = 'block');
  }
}

// 页面加载和窗口 resize 时执行
window.addEventListener('load', hideIncompleteRow);
window.addEventListener('resize', hideIncompleteRow);

把这段JS放在页面底部（或DOM加载完成后执行）即可。

内容的提问来源于stack exchange，提问作者Malvinka