Bootstrap CSS ul width问题 - 列表元素不如父元素宽

Question

我试图用bootstrap 3创建一个布局，并且发现了一个奇怪的属性：

这是代码：

<div class="jumbotron">
  <div class="container center-form panel admin">
    <div class="col-md-12">
      <ul class="list-unstyled" ng-repeat="app in apps | filter:query ">
                <li> 
                <h4> <a ui-sref="/api/admin/{{app._id}}">{{app.name}}</a></h4>
                <div style="width:100%">
                <p class="pull-right"><small> Job ID: {{app._id}}</small></p>
                <p>Appointment Date: {{app.appointment_date | date:'fullDate'}}</p>
                </div>
                <br>
                <address class="text-left"> 
                {{app.address_1}}</br>
                {{app.city}}</br>
                {{app.postcode}}</br>
                </address>
                        </hr>       
               </li>
         </ul>
      </div>
   </div>
</div>

我遇到的问题是这些都在Jumbotron容器中，并且出于某种原因，<ul>标记跨越整个col-md-12 div，但是{<li>标记。 1}}和其中的所有元素都不会，只占用它的一半左右。所以即使我已经添加了style =＆＃34; width：100％＆＃34;到div，它只填充屏幕的一半。

如何使li元素与ul元素的宽度相同？