Question

我有一个260px宽度的旁边。当我尝试放置user-icon和name信息时，right-margin太多了。

<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>Karl Cadigan</span>
        <b class="glyphicon glyphicon-chevron-down"></b>
      </h4></strong>
     </label>
    </a>
  </ul>
 </div>

以下是我的小提琴。我想将user-icon和user-name带到左侧，将下拉图标保留在右侧。

http://jsbin.com/kugudaho/6/edit

Answer 1

在CSS中添加以下类。使用display:inline-block显示彼此相邻的信息。

ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}

DEMO

Answer 2

如果我理解正确，这就是你需要的

HTML标记

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

CSS

i {
  list-style: none;
}

.rightBox{ height: 60px; width:260px; border:1px dashed red; }

.fa-user {
  position: relative;
  background: #666666;
}

.fa-user:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
  float: right !important;
}
.navbar-nav {
  float: inherit;
  padding-left: 10px;
}

我希望我明白你的需要。

Answer 3

我认为您最好从标准的Bootstrap下拉列表开始，并根据需要进行自定义。使用更少的自定义CSS（如果有的话）并且更容易维护......

    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
            Frank
            <span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Choice1</a></li>
            <li><a href="#">Choice2</a></li>
            <li><a href="#">Choice3</a></li>
          </ul>
    </div>

示例：http://www.bootply.com/f9WYqJqLmd

为什么在我的用户图标之前有这么多的右边距？

3 个答案: