Bootstrap Grid 调整大小一次移动到多列答案

【问题标题】：Bootstrap Grid resizing moves to many columns at onceBootstrap Grid 调整大小一次移动到多列
【发布时间】：2026-02-03 20:05:02
【问题描述】：

我有一个如下所示的引导响应行：

当我让我的窗口越来越薄时，一开始会正确调整大小，下一次调整大小看起来像这样：

随着窗口变小，下一项进入下一行。我喜欢这样，它一次继续一列：

但是在两列转到下一行之后，当我再次缩小窗口时，它会一次将每一列添加到自己的行中。

我希望它更优雅，并且每次添加一个，因为它们不适合，并且不要让它们都在自己的行中。它现在有很多空白。

我的代码目前如下所示：

  <div class="row" id="myBtnContainer"> 
    <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

我尝试了 sm、md、lg 和 xl 标签的不同组合，但似乎没有什么能让每个项目一次内联一个。它只是跳到所有人都在自己的路线上。

更新：

我尝试了更多尝试，并注意到如果我将列号添加到行中的不同大小，它或多或少地表现出我想要的样子。但在更广阔的视野中，按钮的间距很大，我喜欢它们彼此靠近：

  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5" id="myBtnContainer"> 
    <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 bootstrap-grid bootstrap-5

【解决方案1】：

你的意思是这样的吗？我只是将 btn 过滤器的样式设置为 100% 的宽度。希望这会有所帮助。

/*New lines of code */
.btn-filter{
      width:100%;
    }

<!DOCTYPE html>
<html lang = "en-uk">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    </head>
    
    
    <body>

        <div class = "container-fluid">
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 px-5" id="myBtnContainer"> 
                <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
              </div>
          </div>
        
        
        
        
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    </body>
    
</html>

【讨论】：

【解决方案2】：

在做了更多研究并查看了这两个堆栈溢出帖子之后：

我能够结合这两个答案来获得我正在寻找的效果！

我不得不使用这个 CSS：

  .buttonSmush {
    max-width: max-content;
    min-width:auto;
    display:inline-block;
    vertical-align: top;
    }

html 是：

  <div class="row" id="myBtnContainer"> 
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="buttonSmush" style="padding: 5px"> <button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

【讨论】：