2

Как на бутстрапе сделать такую верстку навбара: навбар Кнопки по бокам могут быть произвольной длины, строка поиска всегда во всю ширину. Ни кнопки, ни поиск не скрываются при малом размере окна браузера.

Бьюсь уже третий час.

2 ответа 2

1

Если ширина кнопок не известна и может быть разной, то предложу 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>

1

Правой кнопке 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.