css - 调整菜单栏和右侧图标

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 .rows 和 .col- 来实现您想要的行为 。

基于您的预期输出的示例:

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 的顺序无关紧要，您可以切换第一 和第二 列的顺序。