引导程序 4 |无法将搜索框与自定义导航栏的项目保持在同一行答案

【问题标题】：Bootstrap 4 | Can't keep a search box on the same line with a custom navbar's items引导程序 4 |无法将搜索框与自定义导航栏的项目保持在同一行
【发布时间】：2018-03-04 00:00:44
【问题描述】：

我使用 Bootstrap 4 的网格制作了一个自定义导航栏。此导航栏分为两部分：左侧包含导航栏项目，右侧包含搜索框。问题是搜索框无论如何都不会留在我的导航栏的右侧。它始终位于导航栏项目下方（左侧）。

这是我的 HTML 和 CSS 代码：

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

如何正确地将搜索框与导航栏的项目放在同一行？

附： “输入”周围没有标签，因为我尝试使用它们和不使用它们，两种方法都不起作用，所以自上次尝试以来我没有更改代码。

附：在发布我自己的问题之前，我已经搜索了 Google 和 Stackoverflow。没有任何建议的答案对我有帮助。大多数人认为导航栏的项目太多，因此无法适应搜索框，而是将其移至下一行，但我认为这很愚蠢，因为即使导航栏中只有 2 个项目，我也尝试过。

【问题讨论】：

标签： html css navbar positioning search-box

【解决方案1】：

搜索框不会停留在链接的右侧，因为 custom-navbar-buttons 和 custom-navbar-search 都是块级元素。因此，它们都倾向于彼此重叠排列，占据其父 div 的整个宽度，即自定义导航栏。

你需要让它们都内联。

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  display:inline-block;
}

.custom-navbar-search {
  display: inline-block;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

或者您可以简单地使用 flexbox，它可以让您更好地控制导航栏。

.custom-navbar {
  display:flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
 }
 
.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

这也是一种工作方式。如果有人不能或不想使用第一个，请使用这个。谢谢。

【解决方案2】：

这是你想要的吗？

如果您想将搜索栏拉到右侧，请添加：

class="float-right"

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

嗨！我想要它在右边。这就是我将导航栏分成两列的原因，以便第二列可以保留搜索框，并使其更容易远离包含项目的第一列。
@Dream 我无法对其进行测试，因为引导文件不在您的问题中，因此我必须依靠其他问题才能将其正确处理。 Check this out
我认为这对我目前的目的来说已经足够了。谢谢。