将用户图标和用户名与左对齐 [英] Aligning the user-icon and user-name to left

问题描述

我在右侧有一个下拉菜单，有一个图标，用户名和一个向右箭头。

I have a drop-down at the right with a icon, user-name and a right arrow. Its not getting aligned properly.

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

下面是小提琴，它重现了问题，并添加了屏幕截图， 。但目前看起来不一样。

Below is the fiddle which reproduces the issue and also added the screen-shot on how it should look like. But currently it looks different.

http：// jsbin。 com / nulazoki / 18

推荐答案

要将字段置于左侧并与左对齐，不使用 navbar-right 类，可以使用 navbar-left ，如下所示：

To position your field on the left and align it to the left, you need not use navbar-right class, you can rather use navbar-left like below:

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

完成上述操作后，它仍然无法完全对齐到左边，因为有一些边距和填充添加。要取消这些，您可以添加以下代码。

After doing the above, it still would not get perfectly aligned to the left because there are some margins and padding added. To nullify these you can add the below code.

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

侧注：在编辑版本中可能是因为您的输出仅在宽屏幕模式中出现，在编辑期间显示其他选项卡，如HTML / CSS / JS，这使得输出屏幕不是全宽。

Side Note: Your output doesn't show up in the edit version probably because your output comes up only in wide screen mode and during edit the other tabs like HTML/CSS/JS are being shown which makes the output screen not be full width.

JS Bin Demo

这篇关于将用户图标和用户名与左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！