0

С помощью bootstrap работаю над header’ом своей страницы, но при добавлении форм элементы размещаются вертикально один над другим. Как сделать, чтобы и изображение бреднда и формы и кнопки размещались только горизонтально? (код на Angular)

#circle {
  width: 35px;
  height: 35px;
  background: mediumblue;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 50%;
  margin-top: 7px;
}

.navbar-btn {
  margin-top: 12px;
}

.navbar {
  margin-bottom: 5px;
}

navbar navbar-header {
  display: inline-block;
}

.navbar-inverse {
  background-color: darkblue;
}

li a {
  color: white;
}

li a:hover {
  color: khaki;
  background-color: midnightblue;
}

input {
  max-width: 100px;
}
<nav class="navbar-inverse">
  <div class="container">
    <div class="row">
      <div class="navbar navbar-header col-lg-offset-1">
        <div id="circle" class="navbar-brand"></div>
        <form class="form-inline">
          <div class="form-group">
            <label for="inputFirstName" class="sr-only">First Name</label>
            <input type="text" class="form" id="inputFirstName" placeholder="First Name">
            <label for="inputLastName" class="sr-only">Last Name</label>
            <input type="text" class="form" id="inputLastName" placeholder="Last Name">
          </div>
        </form>
        <button type="button" class="navbar-btn my-btn">Ввод</button>
      </div>
      <ul class="nav navbar-nav navbar-right" style="margin-right: 10%">
        <li><a href="#">О приложении</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </div>
  </div>
</nav>

2 ответа 2

0

Добрый день!Так используйте bootstrap grid. В примере ниже вы получите 3 горизонтальных блока. 12 / 4 = 3

<div class="container">
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
</div>
3
0

В случае если я разбиваю весь header на две группы: 6 - слева и 5 - справа (1 - оффсет слева) у меня все равно уходит на следующий ряд элемент button.

#circle {
  width: 35px;
  height: 35px;
  background: mediumblue;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 50%;
  margin-top: 7px;
}
.navbar-btn
{
  margin-top: 12px;
}
navbar
{
  margin-bottom: 5px;
}
.navbar navbar-header
{
  display: inline-block;
}
.navbar-inverse
{
  background-color: darkblue;
}
.form-inline
{
  margin-top: 13px;
  max-width: 350px;
}
li a  {
  color: white;
}
li a:hover{
  color: khaki;
  background-color: midnightblue;
}
<nav class="navbar-inverse">
  <div class="container">
    <div class="row">
      <div class="col-lg-7">
      <div class="navbar navbar-header">
        <div id="circle" class="navbar-brand"></div>
      </div>
        <form class="form-inline">
          <div class="form-group">
                <label for="inputFirstName" class="sr-only">First Name</label>
                <input type="text" class="form" id="inputFirstName" placeholder="First Name">
                <label for="inputLastName" class="sr-only">Last Name</label>
                <input type="text" class="form" id="inputLastName" placeholder="Last Name">
          </div>
        </form>
        <button type="button" class="navbar-btn my-btn">Ввод</button>
      </div>
      <div class="col-lg-5">
        <ul class="nav navbar-nav navbar-right">
        <li><a href="#">О приложении</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
        </ul>
      </div>
    </div>
  </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.

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