bootstrap - 按钮组 - 左侧的按钮被切断答案

【问题标题】：bootstrap - button group - button being cut off on left hand sidebootstrap - 按钮组 - 左侧的按钮被切断
【发布时间】：2014-02-16 15:24:36
【问题描述】：

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

谢谢

【问题讨论】：

你能发布你的css代码，或者它的活生生的例子。这可能有助于在几分钟内确定问题
您在下面有我的答案，以及解决方案

标签： css twitter-bootstrap responsive-design

【解决方案1】：

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

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

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

【讨论】：

谢谢。那必须有旧代码。我已删除按钮组并解决了问题！设置半径值不需要额外的代码
其实我说得太早了。当您删除按钮组
时，它修复了我拥有的“显示信息”按钮的外观，但它破坏了功能。所以你不能点击它并让它显示下拉项目
twitter.github.com/bootstrap/components.html#buttonDropdowns - 第一个例子表明你需要一个按钮组
"border-top-left-radius: 4px; border-bottom-left-radius: 4px" 有效。虽然我仍然不知道它为什么会这样。
-1 表示问题和解决方案。标记的答案与实际问题无关。

【解决方案2】：

给这个CSS

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

【讨论】：

【解决方案3】：

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

溢出：隐藏

在 chrome 中使用 firebug 进行检查并向上，您很可能会看到这一点。Bootstrap 隐藏了溢出列的数据。

【讨论】：

我在 Inspect 中，我选择了“计算”选项卡，所以我可以看到 div 的所有属性/属性...溢出未设置。 overflow-x 和 overflow-y 都不是

【解决方案4】：

天哪，答案是：

更改自：

<div class="btn-group>

到：

<div class="btn-group">

你忘记了"

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

【讨论】：

Aleks，这并没有解决问题......按钮仍然被切断
如果它没有帮助，那么这一切都有点猜测。您能否复制粘贴您的 css 代码，或者更好地在 jsbin.com 或其他任何地方创建实时示例。这会很有帮助

【解决方案5】：

以下解决了我的问题

.btn {
     width:auto !important;
}

【讨论】：