使用Bootstrap为多输入部分

时间:2015-07-20 19:40:32

标签: html css twitter-bootstrap

我想在同一行上有五列。在每个框中都有许多表单输入,其中一些需要在同一行上或以其他方式组织。

我一直在尝试使用Bootstrap的网格系统将它们混合在一起,但我似乎没有按照预期工作。我以为我可以将所有内容都放入容器中,然后使用嵌套的行和列来实现所需的效果。

对于附加的Bootply,名字,中间名,姓氏和昵称是我想要的一个很好的例子。我希望“名称和地址”部分是一列,并且我希望所有信息都在3行

http://www.bootply.com/HhszskhttD

Bootstrap网格布局是最好的方法吗?我只需要弄乱输入的大小吗?我也试过在form-group-sm中混音,但这似乎确实朝着正确的方向发展。我怀疑我在哪里使用与行和列相关的form-group是我问题的根源。

我可以执行此类布局的最佳方式是什么?

1 个答案:

答案 0 :(得分:1)

Bootstrap非常适合这个!我喜欢(爱)Bootstrap网格系统。

要做你想做的事情很简单。对于第一行放class="row"。之后,这一切都很简单。嵌套就是它的样子,但我会解释一下:

假设我有以下列:col-xs-4, col-xs-4, col-xs-4。现在在其中一个列中,我想要分隔框,我将添加以下内容:col-xs-6, col-xs-6。你只需要记住,如果你正在嵌套行,它们总是加起来12。因此,当我向col-xs-4添加两个50%的方格时,它将是col-xs-6而非col-xs-2col-xs-2将是16.66%)。

所以嵌套很简单,并不像看起来那么难。

修改

让我为你举个例子! :) http://www.bootply.com/4yFHVS5g9r 上面的Bootply显示了嵌套的简单程度。

编辑2

另一个例子:

http://www.bootply.com/nJQEzSzsU7

此外,每个嵌套列的边距为15px。