我想在同一行上有五列。在每个框中都有许多表单输入,其中一些需要在同一行上或以其他方式组织。
我一直在尝试使用Bootstrap的网格系统将它们混合在一起,但我似乎没有按照预期工作。我以为我可以将所有内容都放入容器中,然后使用嵌套的行和列来实现所需的效果。
对于附加的Bootply,名字,中间名,姓氏和昵称是我想要的一个很好的例子。我希望“名称和地址”部分是一列,并且我希望所有信息都在3行
http://www.bootply.com/HhszskhttD
Bootstrap网格布局是最好的方法吗?我只需要弄乱输入的大小吗?我也试过在form-group-sm中混音,但这似乎确实朝着正确的方向发展。我怀疑我在哪里使用与行和列相关的form-group是我问题的根源。
我可以执行此类布局的最佳方式是什么?
答案 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-2
(col-xs-2
将是16.66%)。
所以嵌套很简单,并不像看起来那么难。
修改强>
让我为你举个例子! :) http://www.bootply.com/4yFHVS5g9r 上面的Bootply显示了嵌套的简单程度。
编辑2
另一个例子:
http://www.bootply.com/nJQEzSzsU7
此外,每个嵌套列的边距为15px。