带有输入组的按钮工具栏 - 输入组采用全宽，将按钮推到下一行

Button Toolbar with Input Group - Input group takes full width, pushing button to next line

提问人：brendo234 提问时间：11/14/2023 最后编辑：brendo234 更新时间：11/14/2023 访问量：25

问：

似乎无法在同一行上获取 btn 工具栏中的所有项目。第一个输入组在所有屏幕尺寸上扩展到全宽，将下一个按钮/btn-group 推到下一行。

enter image description here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row">
  <div class="col-8">
    <div class="btn-toolbar" role="toolbar" aria-label="Quantity Toolbar">
      <div class="input-group me-2" role="group" aria-label="Quantity Toolbar">
        <button class="btn btn-outline-secondary" type="button" id="button-addon1"><i class="bi bi-dash"></i></button>
        <input type="text" id="8209_qty" maxlength="3" value="1" class="form-control form-control-sm text-center" style="flex-grow:0; flex-basis:40px;">
        <button class="btn btn-outline-secondary" type="button" id="button-addon2"><i class="bi bi-plus"></i></button>
      </div>

      <div class="btn-group" aria-label="Delete Item Toolbar">
        <button class="btn btn-outline-danger" type="button" id="button-trash"><i class="bi bi-trash3"></i></button>
      </div>
    </div>
  </div>

  <div class="col-4 text-end">$499.95</div>
</div>

twitter-bootstrap 引导程序-5

评论

1赞 isherwood 11/14/2023
请修改上面的演示，以便它显示您的问题。它似乎与您描述的不符。您可能应该添加一个容器，以便该行不会在屏幕外运行。
0赞 brendo234 11/14/2023
添加了正在发生的事情的屏幕截图。问题是为什么 btn-toolbar 中的输入组在末尾添加了如此多的填充，以至于它将下一个按钮 dodwn 推到下一行？为什么元素不像这个例子中那样堆叠在一起：getbootstrap.com/docs/5.0/components/button-group/......
0赞 isherwood 11/14/2023
事实并非如此，至少据我们所知。请按照我的要求去做，否则我们没有什么可以排除故障的。此外，您链接到一些非常旧的文档。请务必使用正确的版本。

答： 暂无答案

上一个：如何在下一个 JS 中逐步导入 Bootstrap

下一个：为什么单击齿轮图标时没有显示我的 Bootstrap 下拉菜单？