Question

我正在使用Bootstrap的网格来对齐输入，按钮和警报消息。但是，我发现警报消息的高度远高于按钮和输入的高度。有没有办法使网格中所有元素的高度一致？这是示例和代码：

<div class="container-fluid">
  <div class="row" >
    <div class="col-xs-3 col-xs-offset-6">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
                <button class="btn btn-secondary" type="button">Search</button>
            </span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="alert alert-success"> Result:  </div>
    </div>
  </div> 
</div>

由于

德里克

Answer 1

警告div不会放在您的视图中。它有自己的填充和边距。它通常放在页面顶部。

但是，如果您想将它放在视图中。您可以通过删除填充或使视图垂直对齐来缩小它。

我在这个https://jsfiddle.net/rktg0L2w/1/

中做了两个选择

1）对于与输入更改填充匹配的小alter div：

.alert-small{
    padding: 7px;
}

2）如果你想同时进行输入和改变垂直对齐：

将vcenter课程放在row div上，将alert-large放在您的div上。

.vcenter {
    display: flex;
    align-items: center;
}

.alert-large{
    margin-bottom: 0px;
}

Answer 2

Bootstrap有自己的标准，但是你可以通过编辑raw bootstrap css或覆盖bootstrap css代码来更改代码。例如：

padding is the problem in your case, click here for 1st picture

hola, click here for 2nd picture

但是，你可以通过添加新课程或者你的超级大国和你的英俊来使其具体化

t（.__。t）我的生活

Bootstrap：如何控制每个网格行的高度？

2 个答案: