按钮组宽度导致列中的水平对齐问题

Question

我有以下按钮组，它开始垂直，然后在屏幕压缩时切换到水平。

它有效，但是当屏幕尺寸很大时，封闭的div会获得额外的水平空间，就好像它的反应性增长更宽。这是一个问题，因为我试图将按钮组的列与右侧的列对齐，而额外的宽度使其无法实现。 col-sm-1似乎没有获得这个额外的空间 - 这就是bootstrap的工作原理吗？另外，有没有办法说“让每个按钮与列边框对齐”？

<div class="col-sm-1">
<div class="btn-group">
  <button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
  <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>

编辑： 已更新 jsfiddle link

很难看出我的意思，所以这是一张图片。我已经制作了小提琴全屏，并使用Chrome的devtools来突出显示按钮组。您可以看到已添加额外宽度。请注意，我没有突出显示列（我希望增加宽度），但列中的按钮组

Answer 1

知道了！正是按钮组使事情变得棘手 - 这为每个按钮添加float: left以使它们成为一个组，因此正确的修复似乎是将pull-right类添加到组中的每个按钮。

这可以按照需要工作，一旦我移除了衬垫，按钮就会完全碰到它们的柱子的右侧。 Proof

<div class="col-sm-1">
<div class="btn-group">
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-home"></span></button>
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-volume-down"></span></button>
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-volume-up"></span></button>
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-off"></span></button>
  <button class="btn btn-default pull-right"><span class="glyphicon glyphicon-zoom-out"></span></button>
  <button
    class="btn btn-default pull-right"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
</div>
<div class="col-sm-4" style="background-color:red">
    <p>Here is content I would like the buttons to touch</p>
</div>