css - 你如何调整 bootstrap 表单和按钮在 div 中的高度相同？

Question

我有以下 HTML 和 CSS - 如何使 search-bar 和 add-contacts 具有相同的高度？我目前在 CSS 中将它们的高度设置为 100% 以在它们的容器 div 内扩展，但这不起作用是否可以更改它们的高度，即使它们是 Bootstrap 单元？

HTML

  <div className="container">
    <form className="form-inline search-bar" role="form">
      <div className="form-group has-success has-feedback">
        <label className="control-label" htmlFor="inputSuccess4"></label>
        <input type="text" className="form-control" id="inputSuccess4" type="text" placeholder="Search" onChange={handleChange}/>
        <span className="glyphicon glyphicon-search flipped form-control-feedback"></span>
      </div>
    </form>
    <div className="add-contacts">
      <button type="button" className="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        + Contacts Keeper
      </button>
    </div>
  </div>

CSS

.table-container {
  margin: 20px;
}

.search-bar {
  margin-left: 20px;
  float: left;
  height: 100%;
}

.add-contacts {
  margin-right: 20px;
  float: right;
  height: 100%;
}

Answer 1

只需更改搜索栏的高度即可。

或者您可以将搜索栏与添加联系人栏放在同一个 div 中。