Question

我有以下HTML和CSS - 如何使search-bar和add-contacts高度相同？我目前在CSS中将它们的高度设置为100％以扩展其容器div但是这不起作用即使它们是引导单元也可以改变它们的高度吗？

的 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中。

Answer 2

我觉得使用Bootstrap更简单更好。我尽量避免为已经由Bootstrap设计的大多数HTML元素添加自定义CSS：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="col-md-3 text-left">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">Search</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Search">
                                <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            </div>
                    </div>
                </div>
                <div class="col-md-6"></div>
                <div class="col-md-3 text-right">
                    <button type="submit" class="btn btn-primary">+ add stuff</button>
                </div>
            </form>
        </div>
    </div>
</div>

你如何调整bootstrap形式和按钮在div内的相同高度？

2 个答案: