css - Bootstrap 3.0 网格新手问题

Question

我正在尝试使用 Bootstrap Grid 构建表单，但遇到了一些问题。该页面可以在 input-page 上找到

第一个问题是截面宽度。表单为 5,5,2 = 12，但在两个 5 列中，元素未正确显示。

其次，如何使输入字段在垂直方向上彼此靠近？

第三，如何让列的垂直大小相同，这样它就不会显示主要背景颜色？

Answer 1

将 input 宽度从 100% 更改为 auto，这将允许占位符可见。

.form-group 需要调整 padding-bottom 以便输入字段彼此更靠近。

对于背景，这是 Bootstrap 的错误之一。它不允许相同的高度。有几种方法可以解决这个问题，表格单元格是最常见的。我在该行上使用了一个类，因此如果我有其他不需要它的行，我可以专门针对该部分。然后你需要清除

.row.equal-height {
    display: table;
}

.row.equal-height [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #D4BD72;
 }

  @media screen and (max-width:767px){
    .row.equal-height{
        float:left;
        width:100%;
        text-align:center;
     }
}      

我会看看我是否可以在 Bootply 中为您获取它 :) 需要对表单组内的列进行覆盖才能正常工作。

查看工作 http://www.bootply.com/RSBHrQeOZ6