Bootstrap 4. Почему размер navbar настолько мал?

164

07 октября 2018, 02:30

Адаптирую сайт под мобильные телефоны, столкнулся с такой проблемой что navbar который идет в примерах bootstrap невероятно мал. Приходиться на телефоне приближать экран, что за бред вообще?

Такое чувство что экран остается компьютерный на мобильной версии.

Мой код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <link href="img/favicon.ico" rel="icon">
    <title>Главная страница</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="d-flex h-100 p-3 mx-auto flex-column">
        <header class="mb-auto">
                <div class="container">
                    <nav class="navbar navbar-expand-lg navbar-light" style="font-size: 16px;">
                        <a class="navbar-brand" href="#"><img alt="" height="125" src="images/logo.png" width="240"></a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
                        <div class="collapse text-center navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav ml-auto text-uppercase">
                                <li class="nav-item active">
                                    <a class="nav-link text-info" href="#"><i class="fab fa-facebook-messenger"></i> Форум <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-info" href="#"><i class="far fa-user-circle"></i> Личный кабинет</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-info" href="/news.html"><i class="fab fa-neos"></i> Новости</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-info" href="#"><i class="fas fa-piggy-bank"></i> Донат</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-info" href="#"><i class="fas fa-info-circle"></i> FAQ</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
        </header>
        <script src="js/popper.min.js"></script> 
        <script src="js/bootstrap.min.js"></script> 
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/holder.min.js"></script> 
    </div>
</body>
</html>

Должен быть таким, удобным размером с палец:

А у меня такой - маленький и нужно экран увеличивать...

Answer 1

Добавьте в head после <meta charset="utf-8"> следующее:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Это указано в офф документации по bootstrap4

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ссылки footer не принимают элемент float right

Я пытаюсь сделать так, чтобы текст был слева и имел позицию float left, а ссылки принимали значения float right, но ссылки не принимают этого значенияЯ...

147

CSS

Bootstrap 4. Почему размер navbar настолько мал?

Ссылки footer не принимают элемент float right

Hover эффект появления точки

В чем ошибка, почему выполняется только первое условие?

Как обработать многомерный массив в js?