Html 引导下拉菜单工作不正常_Html_Css_Twitter Bootstrap

Html 引导下拉菜单工作不正常

html css twitter-bootstrap

Html 引导下拉菜单工作不正常,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有下面的html 您需要添加下拉列表类，以使下拉列表按如下方式工作 <tr> <td class="text-center"> <div class="dropdown"> <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="false">

我有下面的html

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

<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>

希望这能奏效我想我知道你在努力实现什么。所有的代码都可以在bootstrap上找到。该链接将指导您如何在Bootstrap3中创建下拉按钮。此外，下面是一个代码正在运行的codeply项目的示例

    <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>


切换下拉列表

工作示例！请将按钮和ul包装在一个div内。“'div class=“btn group”>”，这将解决您的问题

<!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>

或者您可以使用引导类“btn组”

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