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

Posted 2023-03-05

【中文标题】为啥在表单后我无法在导航栏上保持内联？

【英文标题】：Why can't I get anything to stay inline on my nav bar after a form?为什么在表单后我无法在导航栏上保持内联？

【发布时间】：2018-02-12 02:19:05

【问题描述】：

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

我的品牌形象 长搜索栏和提交按钮，填充整个导航栏高度 #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>

【问题讨论】：

(1) <form> 是块元素，默认情况下它不会与其他元素并排，所以这是你需要定位的元素。 (2) 您不能只将一个 div 设置为一列 - 就其本身而言，它没有任何意义。您需要创建一个完整的网格结构，其中行包含列。如果您尝试使用 Bootstrap，请查看他们在网格上的文档

@FluffyKitten 即使我创建了一行，然后将表单放置为col-sm-10，然后将另一列放置为col-sm-2，它也会出现在另一行。我该如何做你提到的这个定位？

正如我所说，您需要参考文档以了解您尝试使用的任何网格系统。此外，您需要将表单等放入列中，而不是相反。

@FluffyKitten 我已经更新了我的问题，但这有完全相同的问题。

您没有正确使用网格系统 - 正如我所说，请阅读文档以了解如何正确使用它。

【参考方案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>

【讨论】：

我不关心基于网格的，但响应式是我想要的。我只希望所有内容都能适当地浓缩（而不是可折叠）。

如果响应是期望的结果，那么在问题中明确说明这一点将有助于提高答案的质量。您需要实现 @media 查询来处理您的特定 px 声明，或者改用基于 % 的声明。您还可以使用响应式框架并实现 grid12 布局（或类似布局），而不是静态的 px 宽度。

@AlwaysQuestioning - 刚回来，正在重新阅读最初的源代码，并意识到我完全错过了这艘船。很抱歉在您的初始示例中没有注意到 bootstrap col 类和 nav 组件。我将尝试抽出一些时间来为您找到更好的答案。

@AlwaysQuestioning - 我用一个使用 Bootstrap 4 网格系统的工作示例更新了我的答案。希望对您有所帮助。