#css #twitter-bootstrap
#css #twitter-bootstrap
Вопрос:
У меня есть приведенные ниже HTML и CSS — как мне сделать search-bar
и add-contacts
ту же высоту? В настоящее время я установил их высоту на 100% в CSS для расширения внутри их контейнера div, но это не работает, возможно ли изменить их высоту, даже если они являются загрузочными блоками?
<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>