html - 响应式表格中的 Bootstrap 下拉菜单

Question

我在 Bootstrap 3 的响应式表格中遇到下拉菜单问题。无论我在 CSS 中放置什么(如溢出:自动或定位)，下拉菜单中的菜单都会出现在响应式 div 中，以便单击在您必须滚动的任何链接上。

<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>

有什么想法吗？

Answer 1

在第 2247 行的 bootstrap.css 中调试之后

@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;
  }

如果您对这两个溢出都发表评论，它会正常工作。由于溢出属性，它在宽度 767 以下无法正常工作，如果您只是覆盖 CSS 中的溢出属性，它就会正常工作。