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

我有以下按钮组，开始垂直，然后在屏幕压缩时切换到水平。按钮组宽度在列中导致水平对齐问题

它可以工作，但是当屏幕尺寸很大时，封闭的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来突出显示按钮组。你可以看到增加了额外的宽度。请注意，我不突出柱

button has too much width

来源

2014-09-29 Hamy

CAn你提起你的代码请。谢谢 – Tushar 2014-09-29 04:49:08

已添加，加号和图片显示确切问题 – Hamy 2014-09-29 04:54:26

不正确的小提琴链接。 – 2014-09-29 05:12:05

得到它里面的列（其中我希望额外的宽度），但按钮组！这是按钮组使事情变得棘手 - 为每个按钮添加一个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>

来源

2014-09-29 14:16:30 Hamy

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

回答

相关问题