GeorgeGeorge
@GeorgeGeorge
Студент

Как сверстать по bootstrap?

Всем привет! Я практически не верстал на bootstrap. Теперь стоит задача сверстать шаблон на bootstrap. Делаю всё по сетке, но получается криво. Подскажите пожалуйста, как правильно тут сверстать сетку ?
Сетка в макете:
37724c10e206445da0a367cb5474a377.png
В браузере:
54988466a0774e09853da765e5c43fdf.png
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;
  }
}

Как на макете не получается
  • Вопрос задан
  • 470 просмотров
Решения вопроса 1
@architawr
"Ok, Google" и все твои проблемы решены
начнем с того, что элементы дизайна не должны выходить на отступы (пункт меню Преимущества) И код скиньте на codepen. И скиньте скрин того, то получается в браузере
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы