css - 下拉 Bootstrap 分开了

Question

我尝试制作下拉 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 的底部？更像这样

Answer 1

你可以使用 top: 20px; left: 15px; 而不是 top: 100%; left: 0; 在你的 CSS 中。这将解决您的问题。

看这里:http://www.bootply.com/qyGxdV9m0t#