Bootstrap 3和CSS3 - Navbar搜索框放置错误

Question

我在使用此导航栏搜索框时遇到问题。在创建两个按钮后，一个用于导航链接，一个用于搜索框，搜索框在桌面视图中的导航链接旁边没有排列。在我的标识下，它坐在一条新线上。我无法解决这个问题。我厌倦了几种不同的方法，但它只是让我的主要目的是拥有一个＆＃34;煎饼＆＃34;在左边，右边的搜索图标都搞砸了。

这是我的HTML代码：

<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#search-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-search"></span>
              </button>
              <div class="row">

              <a class="navbar-brand" href="#"><img src="img/gg_logo1.png" alt="Logo 1" id="Logo 2"><img src="img/gg_logo2.png" alt="GamingGlitch" id="logo2"></a>
                </div>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="nav-collapse">
              <ul class="nav navbar-nav">
                <li>
                  <a href="#">Link 1</a>
                </li>
                <li>
                  <a href="#">Link 2</a>
                </li>
                <li>
                  <a href="#">Link 3</a>
                </li>
                <li>
                  <a href="#">Link 4</a>
                </li>
              </ul>
            </div>
            <div class="collapse navbar-collapse testtest" id="search-collapse">
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
              </form>
            </div>
        </div><!-- /.container-fluid 1 -->          
    </div>    
</nav>

这是我的自定义CSS：

body {
    padding-top: 100px;
  }

  button {
      background-color: transparent;
      color: #525252;
      cursor: pointer;
      font-family: inherit;
  }

  .navbar-header {
    height: 75px;
  }

  .navbar-inverse {
        background-color: #3c6aa1;
        background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #4d80af), color-stop(100%, #2b5593));
        background: -webkit-linear-gradient(top, #4d80af 0%, #2b5593 100%);
        background: -moz-linear-gradient(top, #4d80af 0%, #2b5593 100%);
        background: -o-linear-gradient(top, #4d80af 0%, #2b5593 100%);
        background: linear-gradient(top, #4d80af 0%, #2b5593 100%);  
      background: -ms-linear-gradient(top, #4d80af 0%, #2b5593 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6d94bf', endColorstr='#ff3e648d', GradientType=0);
      filter: none;
      border: 0px;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.38);
      color:#FFFFFF;
      display: block;
      font-size: 12px;
      font-size: 1.2rem;
      font-weight: bold
  }

  .navbar-inverse .navbar-toggle {
        color: white;
        font-weight: bold;
        border-color: white;
        float: left;
        height: 75% ;
        width: 42px;
      border: 0 1px 0 0 solid #cccccc;
      position: relative;
      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.38);
  }

  .navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
  }

  .navbar-inverse .navbar-nav > li > a:hover,
  .navbar-inverse .navbar-nav > li > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:hover,
  .navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
  }
  .navbar-inverse .navbar-nav > .disabled > a,
  .navbar-inverse .navbar-nav > .disabled > a:hover,
  .navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }

  .navbar-nav {
      margin-top: 16px;
  }

  #logo1 {
      margin-top: -3px;
  }

  #logo2 { 
      margin-left: 16px;
      margin-bottom: 13px;
  }

Answer 1

如果您只是将这两个媒体查询添加到当前的CSS中，它应该按预期工作：

@media (max-width: 767px) {
    .navbar-inverse .navbar-collapse .navbar-form{
        margin: 0;
        border: 0 none;
    }
}
@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: inline-block!important;
        float: left;
    }
    .navbar-form {
        padding-top: 10px;
    }
}

但是，我建议稍微清理一下标记，因为有很多不需要的div并且它有点难以阅读（你仍然需要在css上面添加额外的媒体查询）：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#nav-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target="#search-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="glyphicon glyphicon-search"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="img/gg_logo1.png" alt="Logo 1" id="Logo 2"><img src="img/gg_logo2.png" alt="GamingGlitch" id="logo2"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-collapse collapse" id="nav-collapse">
          <ul class="nav navbar-nav">
            <li>
              <a href="#">Link 1</a>
            </li>
            <li>
              <a href="#">Link 2</a>
            </li>
            <li>
              <a href="#">Link 3</a>
            </li>
            <li>
              <a href="#">Link 4</a>
            </li>
          </ul>
        </div>
        <div class="navbar-collapse collapse" id="search-collapse">
          <form class="navbar-form" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
          </form>
        </div>
    </div>
</nav>

如果您使用我建议的新标记，也请添加以下规则：

.navbar-toggle.pull-left {
    margin-left: 15px;  
}

最后，在.navbar-inverse .navbar-toggle的css规则中，您可以移除float:left并且border: 0 1px 0 0 solid #cccccc，这是无效的，因此它不会做任何事情。如果您想要的是0-top，1px-right，0-bottom和0-left border，那么你必须将它们分开：

border-top: 0 none;
border-right: 1px solid #cccccc;
border-bottom: 0 none;
border-left: 0 none;