在 Bootstrap 4 中将内联表单定位在 navbar-brand 旁边

Question

我试图在 bootstrap 4 导航栏上（水平）放置一个内联表单和导航栏品牌，但它们是垂直堆叠的。

我使用的代码如下：

<nav class="navbar navbar-light bg-faded">
  <h1 class="navbar-brand">MyBrand</h1>
  <form class="form-inline">
    <button class="btn btn-sm btn-outline-success" type="button">This should be on the same line as the brand</button>
  </form>
</nav>

我这里有一个引导演示http://www.bootply.com/sOvVSY1TtM#

欢迎任何帮助

Answer 1

2018 年更新

Bootstrap 4 navbar-toggleable-* 已替换为 navbar-expand-*。
只需使用 navbar-expand 对于在所有屏幕宽度上保持水平的导航栏。

Bootstrap 4 导航栏现在默认为垂直（对于移动设备）。要覆盖它，请使用 navbar-toggleable-xl 使其保持水平...

<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
  <h1 class="navbar-brand">MyBrand</h1>
  <form class="">
    <button class="btn btn-sm btn-outline-success" type="button">New Note</button>
  </form>
</nav>

http://www.bootply.com/whbzZorNyy

在 Bootstrap 4 中将内联表单定位在 navbar-brand 旁边

Position inline form next to navbar-brand in Bootstrap 4

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4