在 Bootstrap 4 中将内联表单放置在 navbar-brand 旁边

【问题标题】：Position inline form next to navbar-brand in Bootstrap 4在 Bootstrap 4 中将内联表单放置在 navbar-brand 旁边
【发布时间】：2018-04-14 22:00:56
【问题描述】：

我正在尝试在 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#

欢迎任何帮助

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案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

【讨论】：