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

问题描述

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

当我让我的窗口越来越薄时，首先正确调整大小，下一次调整大小如下：

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

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

我希望它更优雅，并在不合适的情况下一次添加一个，而不是将所有这些都放在自己的生产线上。现在有很多空白。

我的代码目前是这样的：

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

解决方法

你的意思是这样吗？我只是将 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>

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

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

我不得不使用这个 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-4 bootstrap-5 bootstrap-grid twitter-bootstrap

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

问题描述

解决方法

相关问答