Всем привет! Я практически не верстал на bootstrap. Теперь стоит задача сверстать шаблон на bootstrap. Делаю всё по сетке, но получается криво. Подскажите пожалуйста, как правильно тут сверстать сетку ?
Сетка в макете:
В браузере:
HTML:
<header id="header" class="header">
<section class="menu">
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="assets/svg/logo.svg" alt="Genetic" class="menu__logo-img">
</div>
<div class="col-md-7">
<ul class="menu__links">
<li class="menu__links-item">
<a href="#!" class="menu__links-link menu__links-link_active">Преимущества</a>
<li class="menu__links-item">
<a href="#!" class="menu__links-link">О гормоне</a>
<li class="menu__links-item">
<a href="#!" class="menu__links-link">Свойства</a>
<li class="menu__links-item">
<a href="#!" class="menu__links-link">Отзывы</a>
<li class="menu__links-item">
<a href="#!" class="menu__links-link">Купить</a>
<li class="menu__links-item">
<a href="#!" class="menu__links-link">FAQ</a>
</ul>
</div>
<div class="col-md-3">
<form action="?promocode=check" class="promocode-form">
<input placeholder="Проверить код" class="promocode-form__input" type="text">
<button class="promocode-form__button">
<img class="promocode-form__button-icon" src="assets/svg/arrow.svg" alt="Проверить код">
</button>
</form>
</div>
</div>
</div>
</section>
</header>
CSS:
.header {
background-image: url("@{img-folder}header-bg.png");
background-size: 100%;
}
.menu {
&__logo-img {
width: 106px;
margin-top: 30px;
}
&__links {
&:extend(.ul-unstyled);
padding: 40px 0;
}
&__links-item {
display: inline-block;
margin-right: 40px;
&:last-child {
margin-right: 0;
}
}
&__links-link {
color: @blue-color;
text-transform: uppercase;
font-size: 16px;
font-weight: 300;
&:hover {
color: lighten(@blue-color, 10%);
text-decoration: none;
}
&_active {
color: @red-color;
font-weight: 900;
}
}
}
.promocode-form {
padding: 30px 0;
&__input {
background: transparent;
border: 4px solid @blue-color;
width: 220px;
height: 33px;
font-size: 14px;
border-radius: 220px/2;
padding: 0 16px;
margin-right: 12px;
}
&__button {
background: @blue-color;
border: 0;
width: 33px;
height: 33px;
border-radius: 33px/2;
}
&__button-icon {
width: 13px;
height: 13px;
}
}
Как на макете не получается
