引导 - 水平滚动条出现在长下拉菜单项

Question

当我编写引导下拉菜单并且菜单项很长时，它会创建一个水平滚动条，这对用户来说很烦。

HTML：

<br/><br/> 

<div class="container"> 
<div class="row"> 

    <div class="col-md-12"> 

    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      Main Heading 
     </div> 
     <div class="panel-body"> 
      <div class="table-responsive"> 
      <table class="table"> 
      <thead> 
       <th>Big</th> 
       <th>Small</th> 
      </thead> 
      <tbody> 
       <tr> 
       <td style="width:95%"> 
       &nbsp; 
       </td> 
       <td> 
       <div class="btn-group"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
        <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">This is a longer item that will not fit properly</a></li> 
       </ul> 
       </div> 
       </td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 
     </div> 

    </div> 

的jsfiddle：http://jsfiddle.net/ImTalkingCode/j84qfvsj/11/

THX。

Answer 1

try div class="table-responsive" style="overflow-x:hidden;" 

Answer 2

我已决定使用下拉菜单右键对齐右侧的菜单项来修复问题。