引導下拉不幹活正確

-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

引導下拉不幹活正確

回答

相關問題