С помощью 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>