html - 为什么我无法在表单后的导航栏上保留任何内容？

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

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

正如其他人在之前的评论中提到的，更好地理解网格布局以及它们在更大的上下文中的工作方式可能是最有帮助的。

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

Read more on that, here

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

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

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

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>