Question

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

＆＃13;

body {
    margin: 10px;
}

.navbar-container {
  display: flex;
  align-items: center;
}

＆＃13;

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

＆＃13;

Answer 1

添加一个类以生成表单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/

此外，最好使用 Bootstrap 4.0.0 的稳定版本它默认是flexbox，你不需要额外的CSS ......

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

Bootstrap 4导航栏阻止按钮包装

1 个答案: