内联在bootstrap 3 jumbotron中形成两行

时间:2014-06-22 13:17:44

标签: css twitter-bootstrap twitter-bootstrap-3

所以我试图让一个内联表单在bootstrap jumbotron中占用两行。

对于表单元素的每个“行”,我为每组输入分配一个col-md- *,以便表单元素很好地对齐并占用相等的空间。

然而,我注意到我的表单元素之间的空间太大,表单元素没有填满以占用分配给它们的列的完整空间。我需要指定每个元素的宽度吗?或者我需要在表单周围使用固定宽度的容器吗?

这是一个bootply链接http://www.bootply.com/aIhtGnedeN

如何在保留响应性的同时在jumbotron中使用紧凑的两行内联形式?我应该把固定的div放在表格中吗?

1 个答案:

答案 0 :(得分:1)

正如内联表单的bootstrap文档中所述:

  

需要自定义宽度   默认情况下,Bootstrap中的输入,选择和textareas是100%宽。要使用内联表单,您必须在其中使用的表单控件上设置宽度。

您必须手动设置宽度。请使用此CSS例如:

.jumbotron .form-inline input {
    width: 100%;
}

Updated Bootply