Twitter Bootstrap - 如何将两个<li>标签与徽章类对齐

Question

我发布了我面临的问题的形象。这很简单： 我想要显示两个列表项但它们没有正确对齐。我希望结束日期列表项与旁边的绿色徽章对齐。如何取出灰色和绿色徽章之间的空间？

代码如下：

<li>
   <img src="/uploads/avatars/avatar.png" alt="" class="pull-left img-circle"/>
      <div class="news-item-info">
         <h4 class="name">{{ $name }}</h4>
            <div class="position "><u>Start Date (inclusive):</u>
               <div class="value pull-right badge ">
                  {{date('d M Y', strtotime($startdate))}}
               </div>
            </div>
            <div class="position"><u>End Date (inclusive):</u>
               <div class="value pull-right badge badge-success">
                  {{date('d M Y', strtotime($enddate))}}
               </div>
            </div>
         </div>
      </li>

Answer 1

使用bootstrap：请参阅以下示例

<div class="container">
    <div class="col-lg-12">
            <a href="###" class="col-lg-2">start date</a>
            <span class="col-lg-2 pull-left">09-12-2016</span>
    </div>
    <div class="col-lg-12">
            <a href="###" class="col-lg-2">end date</a>
            <span class="col-lg-2 pull-left">15-12-2016</span>
    </div>
</div>

Answer 2

感谢@ ZimSystem上面的评论。我使用的最终代码如下：

<li>
   <img src="/uploads/avatars/avatar.png" alt="" class="pull-left img-circle"/>
   <div class="news-item-info">
      <h4 class="name">{{ $name }}</h4>
         <span class="key pull-left "><u>Start Date (inclusive):</u></span>
            <div class="value pull-right">
               <span class="badge">{{date('d M Y', strtotime($startdate))}}</span>
            </div>
            <span class="key pull-left"><u>End Date (inclusive):</u></span>
           <div class="value pull-right">
              <span class="badge badge-success">{{date('d M Y', strtotime($enddate))}}</span>
           </div>
      </div>
</li>