引导下拉不干活正确

-1

<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里面的一个循环，当我点击按钮，下拉菜单在ta结尾处打开竹叶提取

来源

2017-08-31 lessan

您需要添加下拉类制作下拉工作如下

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

希望这个作品

来源

2017-08-31 13:30:54

我想我有一个你想要完成的想法。所有的代码都可以在bootstrap的website上找到。该链接将指导您如何在引导程序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>

来源

2017-08-31 13:32:18 cwanjt

工作示例！请将Button和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>

基本上，你应该在下面的属性包装按钮和ul内。

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

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

来源

2017-08-31 13:45:23

引导下拉不干活正确

回答

相关问题