Question

我有以下html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<tr>
<td class="text-center">
        <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <div style="background-color:white;width:0.5em;display:inline-block;"></div>
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">                                                                      <li><a href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
        <li><a href=""><i class="fa fa-plus"></i> Adauga</a></li>
        </ul>
</td>
</tr>

我要做的是做一个下拉菜单，但我有两个问题，第一个，按钮中间的div不会显示（我需要做一个白色划界，我不知道这是否是我正在尝试的正确方法）

第二，这个html在循环内部，当我点击按钮时，下拉列表在表格的末尾打开

Answer 1

您需要添加下拉类以使下拉列表按以下方式工作

<tr>
   <td class="text-center">
      <div class="dropdown">
         <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
            <i class="fa fa-phone" aria-hidden="true"></i>
            <div style="background-color:white;width:0.5em;display:inline-block;"></div>
            <span class="caret"></span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right">
            <li><a href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
            <li><a href=""><i class="fa fa-plus"></i> Adauga</a></li>
         </ul>
      </div>
   </td>
</tr>

为了使div可见，请指定height属性

<div style="background-color:white;width:0.5em;display:inline-block;"></div>

希望这有效

Answer 2

我想我已经知道你想要完成什么。执行此操作的所有代码都可以在bootstrap的website中找到。该链接将指导您如何在bootstrap 3中创建下拉按钮。此外，这里是代码实际的代码项目的link。

    <tr>
        <td>
            <div class="btn-group">
                <button type="button" class="btn btn-warning"><i class="fa fa-phone"></i></button>
                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-eye"></i> Vizualizeaza</a></li>
                    <li><a href="#"><i class="fa fa-plus"></i> Adauga</a></li>
                </ul>
            </div>
        </td>
    </tr>

Answer 3

工作示例！请将Button和ul包装在div中。“'div class =”btn-group“＆gt;'”，这应该可以解决您的问题。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h2>Basic Table</h2>
      <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
      <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <tr>
    <td class="text-center">
    <div class="btn-group">
            <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">
            <i class="fa fa-phone" aria-hidden="true">Button click</i>
            <div style="background-color:white;width:0.5em;display:inline-block;"></div>
            <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu"><li><a href=""><i class="fa fa-eye"></i> Vizualizeaza</a></li>
            <li><a href=""><i class="fa fa-plus"></i> Adauga</a></li>
            </ul>
    </div>
    </td>
    </tr>
          </tr>
        </tbody>
      </table>
    </div>

    </body>
    </html>

基本上，你应该将button和ul包含在具有以下属性的div中。

position: relative;
display: inline-block;
vertical-align: middle;

或者您可以使用bootstrap类“btn-group”

Bootstrap下拉列表无法正常工作

3 个答案: