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

【问题标题】：Button group width causing horizontal alignment problems in column按钮组宽度导致列中的水平对齐问题
【发布时间】：2014-09-29 04:38:27
【问题描述】：

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

它可以工作，但是当屏幕尺寸很大时，封闭的 div 会获得额外的水平空间，就好像它反应性地变宽一样。这是一个问题，因为我试图将按钮组的列与右侧的列对齐，而额外的宽度使其成为不可能。 col-sm-1 似乎没有获得这个额外的空间——这就是引导程序的工作原理吗？另外，有没有办法说“使每个按钮与列边框右对齐”？

<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 突出显示按钮组。您可以看到已添加了额外的宽度。请注意，我没有突出显示列（我希望有额外的宽度），而是列内的按钮组

【问题讨论】：

能否请您摆弄您的代码。谢谢
已添加，以及显示确切问题的图像
小提琴链接不正确。
已修复，感谢收看
不知道您何时/如何将其从垂直切换到水平，因为col-sm-1 可能永远不会让您完全水平。但是，当您知道按钮应该是这样时，为什么不尝试使用btn-group-vertical？

标签： css twitter-bootstrap-3 alignment

【解决方案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>

【讨论】：