Question

我右边有一个drop-down icon, user-name and a right arrow。它没有正确对齐。

<div class="rightBox pull-right" href="#">
 <ul class="navbar-nav navbar-right">                 
   <li class="dropdown">
   <li style="margin-top: 3px">
       <i class="fa fa-2x fa-border fa-user"></i>
   </li>
   <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <label class="navbar-text" style="margin-top: 5px;margin-left:0;">
     <strong><h4>
        <span>Shane Watsoner</span>
        <b class="glyphicon glyphicon-chevron-down"></b>
      </h4></strong>
     </label>
    </a>
  </ul>
 </div>

下面是重现问题的小提琴，并且还添加了关于它应该是什么样子的屏幕截图。但目前它看起来不同。

http://jsbin.com/nulazoki/18

Answer 1

要将字段定位在左侧并将其与左侧对齐，您无需使用navbar-right类，而是可以使用navbar-left，如下所示：

  <div class="navbar-collapse collapse">        
      <ul class="navbar-nav navbar-left">
          <li class="dropdown">
              <!-- All the rest of your content -->
          </li>
      </ul>
  </div>

完成上述操作后，它仍然无法与左侧完美对齐，因为添加了一些边距和填充。要使这些无效，您可以添加以下代码。

.navbar-collapse{
  padding: 0;
}
.navbar-left{
  margin: 0;
  padding: 0;
}

旁注：您的输出未显示在编辑版本中可能是因为您的输出仅在宽屏模式下出现，而在编辑期间，其他标签如HTML / CSS / JS正在显示这使输出屏幕不是全宽。

JS Bin Demo

将用户图标和用户名对齐到左侧

1 个答案: