为什么在表单后我无法在导航栏上保持内联？

Question

我正在努力让导航栏包含：

1. 我的品牌形象
2. 长搜索栏和提交按钮，填充整个导航栏高度
3. #2 末端有足够的空间，可以再放置一个相同高度的按钮

...全部在一条线上，不折叠。

但是，就我的一生而言，在我从 #2 放置搜索栏后，我无法让 任何东西与导航栏保持在同一条线上。我尝试将搜索表单放在下面的列中，在不同的地方使用display: inline，navbar-right 等。

如果这很容易解决，请告诉我。我也想控制搜索字段的长度。

#searchBar {
  border-left: 1px solid rgb(216, 216, 216);
  border-right: 1px solid rgb(216, 216, 216);
}

#searchText {
  height: 62px;
}

#searchButton {
  background-color: Transparent;
  border: 0px;
  height: 63px;

}

#navigationBar {
  box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
  height: 63px;
}

a.navbar-brand {
  padding: 0px;
}

.logo-small {
  margin-right: 14px;
  margin-top: 7px;
  margin-left: 19px;
  width: 49px;
}

   <nav class="nav" id="navigationBar">
      <a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small">BRAND IMAGE</a>
     <div class="row">
       <div class="col-sm-10">
            <form>
                <div class="input-group" id="searchBar">
                     <input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
                     <span class="input-group-btn">
                     <button type="button" id="searchButton" onclick="this.blur();"><i class="flaticon-search"></i></button>
              </span>
             </div>
         </form>
    </div>
    <div class="col-sm-2">
    
           <!-- HERE is where I want to place another button to fill the remaining space in the nav bar -->
   </div
   
</nav>

Answer 1

我正在重写我原来的答案，因为我做了几个愚蠢的假设，并且没有提供任何有用的代码。

正如其他人在之前的 cmets 中所提到的，更好地理解网格布局以及它们在更大范围内的工作方式可能最有帮助。

Bootstrap 有一些很棒的功能，专门用于将 form 元素和控件组合在一起，指定您希望它们如何布局。

Read more on that, here

这个 sn-p 使用网格系统将 nav 元素分成 12 列，并使用 col-[size]-[width] 类来定义每个元素应该占据多少“列”，以及这些规则应该应用的分辨率。

例如，您可以在class 属性中使用col-lg-4 和col-xs-2 来告诉该元素在更大或更小的分辨率下的行为不同。

网格类适用于屏幕宽度大于或等于的设备 到断点大小，并覆盖针对较小的网格类 设备。因此，例如将任何 .col-md-* 类应用于元素 不仅会影响其在中型设备上的样式，还会影响大型设备上的样式 如果 .col-lg-* 类不存在，则设备。

The documentation 详细说明了它们是如何协同工作的，并提供了很多关于 @media 查询的示例，因此我建议您仔细阅读。

您可能还想考虑使用navbar 控件来更好地对齐nav 元素本身内的表单控件。 You can find some great examples of that, here.

最后，如果你想玩这个例子，here's the codepen。

希望这个答案比我上一个答案更能帮助你。

#searchBar {
  border-left: 1px solid rgb(216, 216, 216);
  border-right: 1px solid rgb(216, 216, 216);
}

#searchText {
  height: 62px;
}
#another_button {
  height: 62px;
}
.search_bar_button {
  height: 62px;
}

#searchBar input {
  width: 100%;
}

#searchButton {
  background-color: Transparent;
  border: 0px;
  height: 63px;
}

#navigationBar {
  box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
  height: 63px;
}

a.navbar-brand {
  padding: 0px;
  font-size: 10px;
}

.logo-small {
  margin-right: 14px;
  margin-top: 7px;
  margin-left: 19px;
  width: 49px;
}

.another_button {
  width: 100%;
  height: 63px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="nav navbar navbar-default col-xs-12" id="navigationBar">
  <div class="col-xs-2">
    <a class="navbar-brand" href="/">
        <img src="mylogo.png" class="logo-small" />
      BRAND IMAGE
    </a>
  </div>
  <form class="col-xs-6">
    <div class="input-group" id="searchBar">
      <span class="input-group-btn">
        <button id="searchButton" class="btn search_bar_button" type="button">Go!</button>
      </span> 
      <input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
    </div>
  </form>                                                
  <div class="input-group col-xs-4">
    <span id="another_button" class="input-group-btn">
      <button class="another_button btn btn-secondary" type="button">Button 2</button>
    </span>
  </div>                                               
</nav>