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

Answer 2

@Aibrean更改了它，但结果至少是奇怪的。也许我说错了

Bootstrap 3.0网格新手问题

2 个答案: