Bootstrap 2 CSS - 按钮下拉不超过表格内容答案

【问题标题】：Bootstrap 2 CSS - button drop downs not going over table contentBootstrap 2 CSS - 按钮下拉不超过表格内容
【发布时间】：2012-07-05 00:52:10
【问题描述】：

这与https://github.com/twitter/bootstrap/issues/3287 的问题相同（见图），但我不明白解决方案！

我有以下 HTML：

<div class="btn-toolbar">
   <div class="btn-group">
   <button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"</span></button>
   <ul class="dropdown-menu">
      <li><a href="del"> Action 1</a></li>
      <li><a href="details"> Action 2</a></li>
      <li><a href="edit"> Action 2</a></li></ul></div></div>
   </ul>
   </div>
</div>

应该创建一个带有按钮的表格，单击该按钮可以显示按钮中的一些下拉选项。

非常感谢:)。

【问题讨论】：

你能在jsfiddle.net中提供一个小提琴吗？

标签： html css twitter-bootstrap

【解决方案1】：

这对我有用

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="includes/bootstrap/css/bootstrap.min.css" />
</head>
<body>
 <table class="table">
    <tbody>
        <tr><td>some stuff</td><td>some more stuff</td></tr>
        <tr>
            <td>here's something</td>
            <td>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn dropdown-toggle" data-toggle="dropdown">Options<span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="del"> Action 1</a></li>
                            <li><a href="details"> Action 2</a></li>
                            <li><a href="edit"> Action 2</a></li></ul></div></div>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>another row</td>
            <td>with more stuff</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：