中画面中的内联表单行为

Question

我有一个内嵌表单，它不会在中等屏幕中正确浮动元素。在the bootply中，您可以看到当屏幕调整为666px时，表单会分为4行。

我的问题是当屏幕小于660px时第二行。它只包含一个元素，即使后面的其他元素有空间。我认为问题在于第二个选择占据了整条线。

如何让第二行填充尽可能多的空间控件？

Answer 1

您需要将所有元素放在同一个div中。尝试将它们全部移动到.first-row div。

要限制您的控件位于第一行，请使用max-width

以下是一个例子： http://www.bootply.com/U8igeImRHq

Answer 2

在第32行，有一种在线样式，用于设置3°输入的宽度。你可以删除它，表单将改变它的位置。

如果您需要它用于桌面我建议将其放入css而不是为平板电脑/手机进行媒体查询

http://www.bootply.com/P2b26F7LQH#

Answer 3

我之前使用的一种解决这个问题的潜在方法是将所有这些项目从div中删除并进入ul li组合。将ul设置为display：table-row和li to display：table cell将在它们之间平均分割ul的宽度。

之后我可以通过媒体查询专门定位我的ul，以便在显示时占用多行或共享行时进行切换。一旦我的基本性能正确，我就会专注于我的li来调整任何不完全相同的造型。