bootstrap - 按钮组 - 按钮在左侧被切断

Question

问题： 我使用bootstrap css创建的按钮组在左侧显示为切断，如下所示。

代码：

我有以下HTML逻辑：

<div class="span5">
        <div class="row show-grid"> 
        <div class="btn-group>
            <button class="btn dropdown-toggle hidden-desktop visible-phone btn-warning" data-toggle="dropdown">show info&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><div id="address"><?php echo anchor("mycontroller/method1/".$objectid,'addresses'); ?></div></li>
              <li><div id="logs"><?php echo anchor("mycontroller/method2/",'logs'); ?></div></li>
              <li><div id="status"><?php echo anchor("mycontroller/method3/",'status'); ?></div></li>
            </ul>
        </div>
        <br/>
            <div class="span2"><?php echo anchor("mycontroller/method4/","Back to List")?></div>
  </div><!-- end class row show-grid-->     
  <br/> 
</div>

我到目前为止所做的一切：

我一直在使用Firefox的Inspect工具试图找到顶部按钮和底部之间的差异，但我不知道我应该寻找什么属性。我试过修改像：

这样的属性

padding-left
padding-right
margin-left 
margin-right

我还尝试减少应用于按钮的类数，以便我只有：

<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">

但这并没有解决问题。有人能指出我正确的方向吗？也许通过命名我应该追踪的属性类型？这可能是一个CSS特异性问题...因为我没有修改任何引导程序的东西。

由于

Answer 1

提供此CSS

.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}

Answer 2

为什么要将按钮组用于未组合在一起的按钮？它被“切断”的原因是因为按钮组应该合并在一起。

无论如何，它都是这样显示的，因为按钮的内边框没有圆边。您可以通过手动应用边框半径来修复它：

border-top-left-radius: 4px; border-bottom-left-radius: 4px

Answer 3

OMG， 答案是：

改变自：

<div class="btn-group>

为：

<div class="btn-group">

您忘记了"

您可以在此处查看实时修正：http://jsfiddle.net/kCsEs/

Answer 4

这是一个黑客修复，但是在包含按钮的包含div上 - 你可能只是

溢出：隐藏

使用firebug检查chrome并上升，你很可能会看到这个.. Bootstrap会隐藏溢出列的数据。

Answer 5

以下解决了我的问题

.btn {
     width:auto !important;
}