Question

我的导航栏有4条链接全部浮动到右侧。我用.pull-right来使它工作。在移动设备上，我希望每个链接都向左移动，除了我的活动链接。我希望我的主动链接能够在所有设备上保持正确。

我试图找到最有效的方法来做到这一点。 Bootstrap中是否有任何类可以帮助解决这个问题，还是我需要创建一个自定义类来拉动移动设备上留下的3个链接？

HTML

<!-- Fixed Navbar -->
<nav class="navbar navbar-custom">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>       
        </div> <!-- end navbar-header -->

        <div id="navbar" class="collapse navbar-collapse pull-right">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Summit</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>

            <ul class="nav navbar-nav">
                <li class="active"><a href="login.html">Client Login</a></li>
            </ul>
  </div><!--/.nav-collapse -->

    </div> <!-- end container -->
</nav> <!-- end navbar navbar-custom -->

CSS

/*======= navbar ========*/
.navbar {
    opacity: 0.95;
    -webkit-opacity: 0.95;
    -moz-opacity: 0.95;
    filter: alpha(opacity=95); /* internet explorer */
}

#navbar > ul.nav a:hover {
    color: #50b948; /*TD Green*/
}

.navbar-custom {
    background-color: #f2f2f2;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem; /*14px*/
    text-transform: uppercase;
    font-weight: 700;
    border: none;
}
.navbar-custom .navbar-brand {
    color: #777;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
    color: #5e5e5e;
    background-color: transparent;
}
.navbar-custom .navbar-text {
    color: #777;
}
.navbar-custom .navbar-nav > li > a {
    color: #777;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}
.navbar-custom .navbar-nav > .active > a {
    background: #50b948; 
    color: #FAFAFA; 
}

.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
    background: #FAFAFA;

    -webkit-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
    -moz-box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
    box-shadow: .5px .5px 4px 1px rgba(50,50,50,0.75);
}

.navbar-custom .navbar-nav > .disabled > a,
.navbar-custom .navbar-nav > .disabled > a:hover,
.navbar-custom .navbar-nav > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
}
.navbar-custom .navbar-toggle {
    border-color: #ccc; /*btn border-color*/
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: #ddd; /*btn color on hover*/
}
.navbar-custom .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
    border-color: #ccc; /*collapsed bottom border color*/
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
    background-color: #e7e7e7;
    color: #555;
}
@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
      color: #777;
}
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
      color: #333;
      background-color: transparent;
}
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
      color: #555;
      background-color: #e7e7e7;
}
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus {
      color: #ccc;
      background-color: transparent;
  }
}
  .navbar-custom .navbar-link {
    color: #777;
}
.navbar-custom .navbar-link:hover {
    color: #333;
}
.navbar-custom .btn-link {
    color: #777;
}
.navbar-custom .btn-link:hover,
.navbar-custom .btn-link:focus {
    color: #333;
}
.navbar-custom .btn-link[disabled]:hover,
fieldset[disabled] .navbar-custom .btn-link:hover,
.navbar-custom .btn-link[disabled]:focus,
fieldset[disabled] .navbar-custom .btn-link:focus {
    color: #ccc;
}

Answer 1

这里的诀窍是利用已经为移动和非移动添加的Bootstrap类。

你的div：

navbar-collapse collapse

变为：

navbar-collapse collapse in

在移动设备上打开下拉菜单时。这意味着如果您的CSS适用于班级.navbar-collapse.in，则它仅适用于移动设备上的打开菜单。

.navbar-collapse.in {
  float: left !important;
}

此外，Bootstrap v4.0（目前可用，但在alpha中）包含类.pull-xs-left和.pull-sm-right，大概就是为了这个目的。

Answer 2

使用'.navbar-right'。专门设计用于在桌面上向右移动导航，但在移动视图时将链接移回左侧。

Float Bootstrap导航栏链接到移动设备左侧和桌面右侧

2 个答案: