как настроить загрузочную форму и кнопку на одинаковую высоту внутри div?

#css #twitter-bootstrap

#css #twitter-bootstrap

Вопрос:

У меня есть приведенные ниже HTML и CSS — как мне сделать search-bar и add-contacts ту же высоту? В настоящее время я установил их высоту на 100% в CSS для расширения внутри их контейнера 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%;
}
 

Комментарии:

1. получите высоту класса .form-group и присвоите ее максимальной высоте кнопки с помощью jquery

Ответ №1:

Просто измените высоту строки поиска.

Или вы можете поместить панель поиска в тот же div, что и панель добавления контактов.

Ответ №2:

Я считаю, что проще, чем лучше с Bootstrap. Я стараюсь избегать добавления пользовательского CSS для большинства HTML-элементов, уже созданных Bootstrap:

 <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>