Question

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

我的品牌形象
一个长搜索栏和提交填充整个导航栏高度的按钮
在＃2的末尾有足够的空间再用一个相同高度的按钮

...全部在一行中，没有崩溃。

但是，对于我的生活，在我从＃2放置搜索栏后，我无法将任何内容保持在同一行作为导航栏。我已尝试将搜索表单放在下面的列中，在display: inline等不同位置使用navbar-right。

如果这是一个简单的解决方案，请告诉我。我希望能够控制搜索字段的长度。

＆＃13;

#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;
}

＆＃13;

   <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>

＆＃13;

Answer 1

我重写了我的原始答案，因为我做了几个愚蠢的假设，并没有使用提供的代码提供任何非常有用的信息。

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

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

Read more on that, here

此代码段使用网格系统将nav元素划分为12列，并使用col-[size]-[width]类来定义多少＆＃34;列＆＃34;每个要素应该占据，以及这些规则应适用于哪些决议。

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

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

The documentation指定了这些内容如何协同工作，并提供了大量有@media个查询的示例，因此我建议您仔细阅读。

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

最后，如果您想使用此示例，here's the codepen。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

为什么我在表格后无法在导航栏上保留内容？

1 个答案: