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

Question

我有以下按钮组，它们从垂直开始，然后随着屏幕压缩而切换到水平。

它有效，但当屏幕尺寸较大时，封闭的 div 会获得额外的水平空间，就好像它会 react 性地变宽一样。这是一个问题，因为我试图将按钮组的列与右侧的列对齐，而额外的宽度使其不可能。 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

很难理解我的意思，所以这里有一张图片。我已经将 fiddle 全屏显示并使用 Chrome 的开发工具来突出显示按钮组。您可以看到添加了额外的宽度。请注意，我没有突出显示列(我希望有额外的宽度)，而是列内的按钮组

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>