Question

在我的导航栏中，左侧有某些链接，而右侧有一个表格。我希望我的Navbar能够以1300px折叠，而不是我能够实现的768px的默认引导折叠。但是在768px上，表单看起来有所不同。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="nav.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar navbar-default" id="navbar">
      <div class="container-fluid">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="hamburger">
                  <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" href="homePage.html">Logo</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav" id="nav">
                  <li><a href="homePage.html">Home</a></li>
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="who.html">Who we are</a></li>
                          <li><a href="contact.html">Contact Us</a></li>
                      </ul>
                  </li>
                  <li><a href="Training.html">Class Schedule</a></li>
                  <li><a href="frequent.html">F.A.Q.S</a></li>
                  <li><a href="login.html">Login</a></li>
              </ul>
              <form class="navbar-form pull-left text-right" action="gSearch.html" target="_blank" role="search">
                  <div class="input-group">
                      <div>
                          <input type="search" id="search" class="form-control" placeholder="Search" name="q">
                          <span class="input-group-btn">
                              <button type="submit" class="btn btn-default">
                                  <span class="glyphicon glyphicon-search"></span>
                              </button>
                          </span>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </nav>
</body>

这是我的CSS

.text-right {
    float: right !important;
}

.pull-left {
    float: none !important;
}

@media (min-width: 480px) and (max-width: 1300px) {

    .navbar-header {
        float: none;
    }
    .pull-left {
        float: left !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

我已将导航栏的图片附加为全宽，1300px和768px。在768px时，我的表单表现得很奇怪。我希望它看起来与1300px完全一样。谢谢！

Answer 1

您是否尝试从float: none!important;中删除.navbar-nav？

Answer 2

尝试将搜索栏周围的div中的显示属性设置为“ display：flex;”。这将导致所有直接子元素在水平方向而不是垂直方向上并排排列。这是我输入代码的方式：

@media (max-width: 768px) {
  .navbar-form .input-group div {
     display: flex;
  }
}

如您所见，我还将新CSS放置在媒体查询中，因此您在768px以上的工作代码将不受影响。

这也是一个可行的jsfiddle：https://jsfiddle.net/hdg683wn/12/

Bootstrap Navbar表单问题修复

2 个答案: