樣式Bootstrap下拉按鈕與Firefox中表格的錨點相同

我在表格單元格內有一個下拉菜單&按鈕。此下拉菜單必須包含錨點和按鈕。我無法控制用錨點替換按鈕元素，但是，我希望按鈕看起來就像標準的Bootstrap菜單項，所以我正像錨點一樣對它們進行樣式設置，但是項目的寬度會發生一些奇怪的事情。當位於表格內的下拉菜單將增長到最大的錨點的大小，但不是最大的按鈕。但是，當在表格外部時，下拉菜單完美地增長到按鈕的大小。樣式Bootstrap下拉按鈕與Firefox中表格的錨點相同

我已經把小提琴，藉以說明問題：

http://jsfiddle.net/5p341amh/205/

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div class="dropdown"> 
       <button class="btn btn-default" 
         data-toggle="dropdown"> 
        <span id="dropdown_title2">Select Something</span> 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" > 
        <li><a tabindex="-1" href="#">Fooooooooooo</a></li> 
        <li><button tabindex="-1" href="#">Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</button></li> 
        <li><button tabindex="-1" href="#">Baz</button></li> 
       </ul> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table>

任何有識之士將是對如何解決這個偉大的！謝謝！

來源

2015-11-06 Fred Hurgleburgler

該問題只出現在Firefox瀏覽器。 Chrome似乎表現得如我所料。 –

在這裏找到解決方案：https：//github.com/twbs/bootstrap/issues/14320 不得不改變寬度：100％到最小寬度：100％ –

我不知道我是否理解你的回答很好，但是你不需要添加一個按鈕元素並在其中放置錨標籤。您只能添加錨標記並將其設置爲按鈕。 <a href="#" id="button" class="btn btn-primary " >Baaaaaaaaaaa</a>

來源

2015-11-07 01:06:19 Franco

對不起，但我不能只使用錨標籤。 :(下拉項目是需要看起來相同的錨點和按鈕的組合 –

嘗試

display: table; 
max-width: 300px /* or set your specified max-width */;

來源

2015-11-07 01:45:10

不幸的是，下拉的寬度必須保持動態，因爲它可以使用任何字符串進行自定義 –

然後只需執行「display：table;」或嘗試「overflow：auto」 –

假設這些是爲

樣式Bootstrap下拉按鈕與Firefox中表格的錨點相同

回答

相關問題