Question

Bootstrap下拉列表在响应式和桌面式下都不起作用，因为我在UIActivityViewController内部使用了这个，并且有table-responsive属性。

有人可以解决吗？

谢谢

overflow

.dropdown-toggle{ cursor:pointer;}

Answer 1

您可以使用解决方案https://jsfiddle.net/n2omqzpu/1/

$('a[class="dropdown-toggle"]').click(function(){
	var pos = $(this).closest('td').position();
  var ele = $(this).siblings('ul.dropdown-menu');
 	var width = $(document).width() - 200;

  if( width > pos.left) {
    $(ele).css({
      left: pos.left,
      top: (pos.top + 20)
  });
  } else {
     $(ele).css({
      left: (pos.left - 180),
      top: (pos.top + 20)
     });
  }
});

.dropdown-toggle{ cursor:pointer;}

.dropdown-menu{
  position:fixed;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>


</tr>
</thead>
<tbody>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>

<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
&nbsp;&nbsp;&nbsp;
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>&nbsp;&nbsp;&nbsp;

</div>
</td>
</tr>



</tbody>
</table>
</div>
</div>

定位dropdown元素需要一点动态计算。将dropdown设为定位 d。

Answer 2

在我的系统中它正在运行。只需像这样更改你的css代码。

.dropdown-menu {
position: absolute;
top: 100%;
left: -135px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);

}

如果需要，可以左右值增加或减少（左：-135px）

引导操作下拉列表在响应表内无效

2 个答案: