@Parsifal31017
Программист

Как мне выровнять div?

Мне нужно сверстать лендинг и у меня возникли проблемы с этой частью:

5f29392deb21d267938088.png

А нужно так:

5f2939213a717017709606.png
<footer class="line">
            <div container-fluid>
                <div class="container">
                    <div class="row justify-content-md-center">
                        <div class="col col-lg-2">
                            <p class="westline">West Line</p>
                        </div>
                        <div class="col">
                            <div class="col">
                                <p class="main">Главная</p>
                            </div>
                            <div class="col">
                                <p class="catalog">Каталог</p>
                            </div>
                            <div class="col">
                                <p class="company">О компании</p>
                            </div>
                        </div>
                        <div class="col col-lg-2">
                            <p class="zvonok"><u>Заказать звонок</u></p>
                        </div>
                    </div>
                </div>
            </div>
            <br />
        </footer>


Что я делаю не так?

А также я не понимаю как сделать этот шрифт:

5f293acb803e5817862732.png
  • Вопрос задан
  • 76 просмотров
Решения вопроса 2
Nolis
@Nolis
it-гопник
flexbox
шрифты
Не думаю, что это шрифт, обычно так над логотипами не извращаются


Одинаковый класс у контейнера для меню и самих элементов, не лучший вариант
<div class="col">
                            <div class="col">
                                <p class="main">Главная</p>
                            </div>
                            <div class="col">
                                <p class="catalog">Каталог</p>
                            </div>
                            <div class="col">
                                <p class="company">О компании</p>
                            </div>
                        </div>
Ответ написан
@antanol
Во-первых, почему вы используете вместо ссылки параграф?! Для ссылок используется тег <a>. Да, даже, если речь идёт о ссылке на кусок той же самой страницы. Вы дали параграфу нужные поведение и внешний вид, но ссылкой он от этого не стал, и вы никуда не перейдёте.

Во-вторых, для логотипов никто не задаёт стили. Из макета вырезается картинка и вставляется на сайт. Либо через <img>, либо через background раздела.

В-третьих, почему вы используете footer? Футер это подвал, а шапка сайта всё-таки обычно наверху. Вам нужен .

В-четвёртых, <div class="col"><div class="col"></div></div> эквивалентен <div class="col col"></div>, если мы говорим о правилах вложенности, и не сработает так, раз речь о бутстрапе. О вложенности бутстрапа можете почитать в официальной документации.

Так работает. Css не использовала, чисто бутстрап
<div class="container-fluid">
  <div class="container">
    <header class="line">
      <div class="row justify-content-md-center">
        <div class="col col-lg-2">
          <a class="westline">West Line</a>
        </div>
        <div class="col">
            <a href="#" class="main">Главная</a>
        </div>
        <div class="col">
            <a href="#" class="catalog">Каталог</a>
        </div>
        <div class="col">
            <a href="#" class="company">О компании</a>
        </div>
        <div class="col col-lg-2">
          <a href="#" class="zvonok">Заказать звонок</a>
        </div>
      </div>
    </header>
  </div>
</div>


А ещё лучше использовать песочницы вроде codepen.io и тестить там нерабочие куски, и их же кидать людям.
Например, вот по вашему примеру (и там же внизу рабочий результат показан):
https://codepen.io/antanol/pen/qBZWGXQ
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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