Bootstrap 3在页面调整大小时没有正确处理内联元素

Question

我在使用Bootstrap 3.2.0时遇到了一些麻烦。基本上，我有一个带有一些 li 元素的标题菜单，并且内联我有一个简单的登录表单。

请参阅我的代码here

问题是css没有正确处理左右浮动元素

奇怪的是，当只有一个输入元素时，一切似乎都有效，你可以看到here

请注意，html直接来自

的Bootstrap示例

- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/

P.S。 Jumbotron似乎与登录表单工作得很好，但我猜这是因为没有ul / li左浮动菜单

我很感激您提供的任何帮助

谢谢

修改

嘿伙计们，谢谢你们的回复。我不确定这是否是预期的行为

- ＆GT;

即。登录表单被推送到下一行，但我希望它将所有内容都折叠成“移动”类型的菜单，然后将表单向下推到下一行。

修改2

P.S。上面的截图来自Firefox 31.0（我看到相同的Chrome版本36.0.1985.125米）

Answer 1

有几种方法可以解决这个问题......

1）自定义Bootstrap CSS，使菜单以不同的屏幕大小折叠：即http://getbootstrap.com/customizer，将@grid-float-breakpoint更改为= @screen-md-min。

2）添加一些自己的自定义CSS，在适当的时候通过添加到输入组的自定义类和媒体查询将输入字段缩小到〜width:100px：

@media(min-width:768px) and (max-width:992px){
  .custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}

3）使用Bootstrap的隐藏/可见列类，将登录元素放在仅popover屏幕大小的sm内。这是“高级”选项，可能有点过分，但尝试很有趣。它会是这样的：

...
<div class="visible-sm">
  <div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
  <input ... ><!-- Put your regular login here -->