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现在是垂直的（对于移动设备）。要覆盖此内容，请使用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 Fixed top navbar shows collapsed and hides content

在Bootstrap 4中以navbar-brand旁边的位置显示内联形式

1 个答案: