Bootstrap 网格调整大小一次移动到多个列

Question

我有一个 bootstrap 响应行，如下所示：

当我让我的 window 越来越薄时，首先会正确调整大小，下一次调整大小如下所示：

随着 window 变小，下一项转到下一行。我喜欢这样，它一次继续一栏：

但是在 2 列转到下一行之后，当我再次将 window 变小时，它会立即将每一列添加到自己的行中。

我希望它更优雅，一次添加一个，因为它们不合适，而不是让它们都在自己的行上。现在白了很多space

我的代码目前是这样的：

  <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 标签的不同组合，但似乎无法使每个项目一次一个地内联。它只是跳到所有人自己的线上。

更新：

我尝试了更多尝试，发现如果我将列号添加到行中的不同尺寸，它或多或少会表现出我想要的样子。但是从更广泛的角度来看，它 space 按钮太多了，我喜欢它们彼此靠近：

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

Answer 1

你的意思是这样的吗？我只是将 btn-filter 的宽度设置为 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>

Answer 2

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

How do I keep two divs on the same line?
Div Size Automatically size of content

我能够结合这两个答案来获得我想要的效果！

我不得不使用这个 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>

Bootstrap 网格调整大小一次移动到多个列

Bootstrap Grid resizing moves to many columns at once

css

twitter-bootstrap

bootstrap-4

bootstrap-grid

bootstrap-5