样式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中表格的锚点相同

回答

相关问题