Как на бутстрапе сделать такую верстку навбара:
Кнопки по бокам могут быть произвольной длины, строка поиска всегда во всю ширину. Ни кнопки, ни поиск не скрываются при малом размере окна браузера.
Бьюсь уже третий час.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли ширина кнопок не известна и может быть разной, то предложу flex
:
.custom-col {
display: flex;
flex-flow: row nowrap;
align-items: center;
align-content: center;
justify-content: space-between;
}
.search,
.search input {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="custom-col">
<button type="button" class="btn btn-success">Button - 1 </button>
<div class="search">
<input type="text" class="form-control">
</div>
<button type="button" class="btn btn-primary btn-lg">Button - 2</button>
</div>
</div>
</div>
Правой кнопке float:right;
, левой – float:left;
, а центральному блоку – overflow:hidden;
.
.navbar-default {
padding: 10px 0;
}
.navbar-wide {
overflow: hidden;
padding: 0 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<nav class="navbar navbar-default">
<div class="container">
<a class="btn btn-default pull-right" href="#" role="button">Right</a>
<a class="btn btn-default pull-left" href="#" role="button">Left</a>
<form class="navbar-wide">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</span>
</div>
</form>
</div>
</nav>