css - 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 特异性问题......因为我没有修改任何 Bootstrap 的东西。

谢谢

Answer 1

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

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

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