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

【问题标题】：Twitter Bootstrap - How to align two <li> tags with a badge classTwitter Bootstrap - 如何将两个 <li> 标签与徽章类对齐
【发布时间】：2017-03-07 10:51:29
【问题描述】：

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

代码如下：

<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>

【问题讨论】：

你能提供小提琴或钢笔吗？
使用标准 Bootstrap，它是对齐的：codeply.com/go/zfCqbcOeWo 你必须有一些覆盖样式的自定义 CSS。
@ZimSystem 你是对的。我忘了按照自定义 CSS 的要求将 pull-left 插入父 <divs

标签： php html css twitter-bootstrap

【解决方案1】：

使用引导程序：参见以下示例

<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>

【讨论】：

【解决方案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>

【讨论】：