Question

我尝试在desctop和移动视图上垂直对齐bootstrap导航栏中的项目时，我绝对是堆叠的。有没有人可以解释如何解决它？

我需要在desctop和移动设备上将头像和名称对齐到右侧，并在导航栏中垂直居中。这里是HTML代码：

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href="#"><b>Super</b> logo</a>
        </div>
      <div class="nav navbar-nav navbar-right">
            <ul class="unstyled">
                <li>
                    <a href="/profile">
                        <img class="img-rounded" src="http://lorempixel.com/output/people-q-c-150-150-9.jpg" alt="">
                        <span class="hidden-xs">User name</span>
                    </a>
                </li>
            </ul>
        </div>
      <div class="navbar-collapse collapse" id="main-nav">
            <ul class="nav navbar-nav visible-xs">
                <li><a href="#"><i class="fa fa-tachometer"></i> menu 1</a></li>
                <li><a href="#"><i class="fa fa-wrench"></i> menu 2</a></li>
                <li><a href="#"><i class="fa fa-sign-out"></i> menu 3</a></li>
            </ul>
        </div>
      </div></nav>

和CSS

.navbar-toggle {
        position: absolute;
        left: 10px;
    }
.logo {
    width: 100%;
    padding: 15px 0;
    text-align: center;
    height: 20px;
}
.img-rounded {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}
.unstyled li {
      list-style: none;
}
.unstyled a {
      text-decoration: none;
}
@media only screen and (min-width: 768px) {
    .logo {
        width: 150px;
    }
}

这是一个错误的例子。 http://www.bootply.com/zh0J2u4KUU

Answer 1

更新使用此

@media (max-width: 767px)
{
ol, ul{margin-top:6px; margin-right:302px;
}


<ul class="unstyled pull-right">
 <li>
 *******
 </li>
 </ul>

将徽标类更改为右拉！

updated as like this

在引导程序导航栏中对齐项目

1 个答案: