Bootstrap 4 导航栏防止按钮换行

Question

我希望搜索栏在移动视图中缩小，并且所有内容都保持内联。目前该按钮环绕在搜索栏下方。

body {
    margin: 10px;
}

.navbar-container {
  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-light bg-faded">
 <div class="container navbar-container">
  <a class="navbar-brand" href="#">
   <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
 <form class="form-inline ">
   <input class="form-control form-control-sm" type="text" placeholder="Search">
   <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
  </form>
 </div>

</nav>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

添加一个class使表格display:flex..

.d-flex {
  display: flex;
  align-items: center;
}

<nav class="navbar navbar-light bg-faded">
 <div class="container navbar-container">
  <a class="navbar-brand" href="#">
   <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
 <form class="form-inline d-flex">
   <input class="form-control form-control-sm" type="text" placeholder="Search">
   <button class="btn btn-outline-success btn-sm" type="submit">Go</button>
  </form>
 </div>
</nav>

https://jsfiddle.net/gdjwdjmq/

另外，最好使用Bootstrap4.0.0
的稳定版它默认是 flexbox，你不需要额外的 CSS...

https://www.codeply.com/go/BB1lcTDE71

Bootstrap 4 导航栏防止按钮换行

Bootstrap 4 navbar prevent button wrapping

css

twitter-bootstrap

flexbox

bootstrap-4

twitter-bootstrap-4