响应表中的Bootstrap下拉菜单 [英] Bootstrap dropdown menu within a responsive table

问题描述

我在Bootstrap 3的一个响应表中有一个下拉菜单的问题。无论我放在CSS中（像overflow：auto或者定位），下拉菜单出现在响应div中，为了点击您必须滚动任何链接。

 < div class =table-responsive> 
< table class =table table-striped> 
< thead> 
< tr class =table_desc> 
< th>< / th> 
< th>< input type =checkbox>< / th> 
< th>状态< / th> 
< th>动作< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr class =table_items> 
< td>< div class =item_strip>< / div>< / td> 
< th>< input type =checkbox>< / th> 
< td>存款付款< / td> 
< td> 
 <！ - 分割按钮 - > 
< div class =btn-group action-button> 
< button type =buttonclass =btn btn-xs btn-danger>查看< /按钮> 
< button type =buttonclass =btn btn-danger btn-xs dropdown-toggledata-toggle =dropdownaria-expanded =false> 
< span class =caret>< / span> 
< span class =sr-only>切换下拉菜单< / span> 
< / button> 
< ul class =dropdown-menurole =menu> 
< li>< a href =＃>编辑< / a>< / li> 
<！ - < li class =divider>< / li> - > 
< li>< a href =＃>发送发票< / a>< / li> 
< li>< a href =＃>发送提醒< / a>< / li> 
< / ul> 
< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

任何想法？

解决方案

  @media screen and（max-width：767px）
 
 ）{
 .table-responsive {
 width：100％; 
 margin-bottom：15px; 
 overflow-x：auto; 
 overflow-y：hidden; 
 -webkit-overflow-scrolling：touch; 
 -ms-overflow-style：-ms-autohiding-scrollbar; 
 border：1px solid #ddd; 
 
 
 
 
 
 $ b 
如果你评论这两个溢出它可以正常工作，它在下面不能正常工作宽度767，因为溢出属性，如果你只是覆盖你的CSS这些将工作。
 
Im having an issue with a dropdown menu within a responsive table in Bootstrap 3. No matter what I place in the CSS (like overflow: auto or positioning) the menu in the dropdown appears within the responsive div and in order to click on any of the links you would have to scroll.



<div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr class="table_desc">
                  <th></th>
                  <th><input type="checkbox"></th>
                  <th>Status</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr class="table_items">
                  <td><div class="item_strip"></div></td>
                  <th><input type="checkbox"></th>
                  <td>Deposit Paid</td>
                  <td>
                    <!-- Split button -->
                    <div class="btn-group action-button">
                      <button type="button" class="btn btn-xs btn-danger">View</button>
                      <button type="button" class="btn btn-danger btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                      </button>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Edit</a></li>
                        <!-- <li class="divider"></li> -->
                        <li><a href="#">Send Invoice</a></li>
                        <li><a href="#">Send Reminder</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
</div>
Any Ideas?
解决方案
after debugging in bootstrap.css on line 2247
@media screen and (max-width: 767px) {
 .table-responsive {
   width: 100%;
   margin-bottom: 15px;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   border: 1px solid #ddd;
  }
If you comment both overflows it works properly.It doesn't work properly below width 767 because of the overflow properties if you simply overwrite those in your css it will work.

                        
这篇关于响应表中的Bootstrap下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！