导航栏中的浮动右键跳转到 XS 显示的下一行

Question

我有一个简单的导航栏，其中一个按钮向右浮动，当我将显示大小更改为 XS(phone 视图) 按钮跳转到下一行时，我怎样才能保持它向右浮动并保持不变符合品牌名称 ?

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BjjBase.com</a>
    </div>
    <button type="button" class="btn btn-success navbar-btn navbar-right">+ Submit Event</button>
  </div>
</nav>

http://www.bootply.com/tZN98fGOmL

Answer 1

navbar-header 在 768 像素或更少 (xs) 处更改为 100% 宽度，因此您可以将其删除以防止垂直堆叠..

<nav class="navbar navbar-inverse">
  <div class="container">
    <a class="navbar-brand" href="#">BjjBase.com</a>
    <button type="button" class="btn btn-success navbar-btn pull-right">+ Submit Event</button>
  </div>
</nav>

http://bootply.com/n1V0BBnVRJ

导航栏中的浮动右键跳转到 XS 显示的下一行

Floated right button in navbar jumps to the next line for XS displays

html

twitter-bootstrap

twitter-bootstrap-3