响应表中的Bootstrap下拉菜单

时间:2014-11-22 18:44:47

标签: html css twitter-bootstrap

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

enter image description here

enter image description here

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

任何想法?

1 个答案:

答案 0 :(得分: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中的那些它将起作用。