Bootstrap 3.从重叠的缩略图中停止导航丸

Question

我一直在尝试用图片（缩略图）创建一个div，然后在它下面创建一些导航丸。但它们总是与图像重叠。我尝试了一切。这是HTML和CSS，我使用bootstrap 3：

<div class = "col-md-4">
<div class = "row clearfix div_image">
    <img src="..." class= "img-thumbnail"/>
</div>

<div class = "div_pills row clearfix">
   <ul class="nav nav-pills">
   <li>
       Text <span class="badge"> Number2 </span> 
   </li>
   <br>
    <li>
       Text2 <span class="badge">Number</span> 
    </li>
     <br>
    </ul>
</div>
</div>

 css:

.div_image{
max-height: 230px;
max-width: 230px;
display: block;
 }
.div_pills{
 display:block
 }

这是结果。药丸重叠缩略图： Pills over Thumbnail

我希望缩略图下的药丸不会超过它。我宣布＆＃34;行＆＃34;和＆＃34;显示：阻止＆＃34; ..为什么它们重叠？