css - 下拉 Bootstrap 分开了

标签 css twitter-bootstrap twitter-bootstrap-3 drop-down-menu

我尝试制作下拉 Bootstrap 菜单，使用 <hr> 在下拉菜单底部有边框

问题是下拉菜单跳转了 <hr> 行。

这是html

<div class="container">
<div class="row">
    <div class="col-md-8">
        <b>Available at :</b> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            List<span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
        @foreach ($listings as $listing)
            <li>Text</li><br>
        @endforeach
        </ul>
    <hr>
    </div>

在下拉样式下，有 top : 100%如果取消勾选，下拉列表会正确显示。

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
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);

任何人都知道如何解决这个问题，以便下拉列表将准确显示在 Available at :List 的底部？更像这样