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

Question

我使用 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>

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

P.S.: "input" 周围没有标签，因为我尝试过使用它们和不使用它们，两种方式都不起作用，所以自上次尝试以来我没有更改代码。

P.P.S.: 在发布我自己的问题之前，我搜索了 Google 和 Whosebug。 None 的建议答案对我有帮助。大多数人建议导航栏有太多项目，所以它无法容纳搜索框，而是将其移到下一行，但我认为这很愚蠢，因为即使我的导航栏中只有 2 个项目，我也尝试过。

Answer 1

这是你想要的吗？

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

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>

Answer 2

搜索框不会停留在链接的右侧，因为 custom-navbar-buttons 和 custom-navbar-search 都是块级元素。所以他们都倾向于安排在彼此的顶部占据他们 parent div 的整个宽度，即 custom-navbar.

您需要将它们都设为内联。

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

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

Bootstrap 4 | Can't keep a search box on the same line with a custom navbar's items

html

css

positioning

search-box

navbar