Question

使用bootstrap设计，尝试调整左侧的菜单栏，图标将在右侧。但是在菜鸟和图标之间有一个巨大的空间。我想将菜单栏设置在注册按钮附近。

代码： -

<div class="container">
    <div id="ss" class="col-lg-9">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                    <li><a href="#">Submenu 3</a></li>
                </ul>   
             </li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </div>
    <div class="col-lg-3">
        <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"> Sign Up</span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</span></a></li>
        </ul>
    </div>
</div>

期待输出： -

实际输出： -

Answer 1

我不知道您是否需要遵守任何特定的HTML，但您可以通过嵌套各种 bootstrap。和.col-来实现您想要的行为。＆＃39; S 即可。

基于预期输出的示例：

<强> HTML

<div class="container">
  <div class="row">
    <div class="col-md-3">
        <h1>Logo</h1>
    </div>
    <div class="col-md-9 re-order">
        <div class="row">
            <div id="ss" class="col-lg-12 first">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Submenu 1</a></li>
                            <li><a href="#">Submenu 2</a></li>
                            <li><a href="#">Submenu 3</a></li>
                        </ul>   
                     </li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>
            <div class="col-lg-12 second">
                <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"> Sign Up</span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</span></a></li>
                </ul>
            </div>
        </div>
    </div>
  </div>    
</div>

如果您希望导航在注册/登录之前出现（但在HTML中排在第一位），您可以使用以下媒体查询切换这两个列：

CSS：

 @media (min-width: 768px) {
      .re-order .row{
        display: flex;
        display: -ms-flex;
        flex-direction: column;
      }
      .re-order .row .first {
        order: 2;
      }
      .re-order .row .second {
        order: 1;
      }
    }

如果HTML的顺序无关紧要，您只需切换第一个和第二个列的顺序。

Answer 2

https://jsfiddle.net/15xkx10c/3/

这看起来与您的“预期结果”相似。我将类first和second添加到导航栏和以下CSS：

.first {
  float:left;
}

.second {
  float:left;
  clear:both;
}

调整菜单栏和右侧图标

2 个答案: