0

问题： 我使用 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 特异性问题......因为我没有修改任何引导程序的东西。

谢谢

4

5 回答 5

0

给这个 CSS

.btn{
display:block;
padding:XXpx;
margin:XXpx;
height:XXpx;
width:XXpx;
}
于 2013-03-28T13:20:06.303 回答
0

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

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

border-top-left-radius: 4px; border-bottom-left-radius: 4px
于 2013-03-28T13:24:16.543 回答
0

OMG，答案是：

更改为：

<div class="btn-group>

到：

<div class="btn-group">

你忘了"

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

于 2013-03-28T13:55:16.910 回答
0

这是一个 hack 修复，但在包含在按钮周围的 div 上 - 你可能只是有

溢出：隐藏

用 firebug 在 chrome 中检查并向上走，你很可能会看到这个。引导程序隐藏了溢出列的数据。

于 2013-03-28T13:57:47.333 回答
0

以下解决了我的问题

.btn {
     width:auto !important;
}
于 2014-02-15T16:04:12.117 回答