Кнопка Navbar не будет выравниваться вправо, когда окно развернуто - PullRequest
Новая
       16

Кнопка Navbar не будет выравниваться вправо, когда окно развернуто

0 голосов
/ 30 мая 2018

Я создаю очень простое веб-приложение, которое поможет мне чувствовать себя комфортно при написании Javascript, и у меня возникли некоторые проблемы с навигационной панелью (ничего общего с js).У меня есть кнопка, которую я хочу выровнять прямо на панели навигации, и она отлично работает, когда окно имеет небольшие размеры, но когда я максимизирую окно, оно больше не выравнивается по правому краю.В верхнем правом окне приведена уменьшенная версия страницы.

the right corner window is the page

Вот развернутая страница:

the maximized page

Итак, как вы можете видеть, когда размер страницы превышает определенный размер, кнопка больше не выравнивается.Я чувствую, что это может быть чем-то очевидным, что я упускаю (совершенно новый для веб-разработчика здесь) и мне интересно, есть ли какой-то класс CSS или что-то, что я могу использовать, чтобы компоненты сохранили свою позицию.например pull-right pull-right-lg.Я использую Django для обслуживания главной страницы приложения, а также для опорных и подчеркивающих элементов.Вот мой HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    {% load static %}
    <link rel='stylesheet' href="{% static 'bootstrap.min.css' %}"/>
    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'/>
    <script type='text/javascript' src="{% static 'jquery-3.3.1.min.js' %}"></script>
    <script type='text/javascript' src="{% static 'underscore-min.js' %}"></script>
    <script type='text/javascript' src="{% static 'backbone-min.js' %}"></script>
    <script type='text/javascript' src="{% static 'views.js' %}"></script>
    <script type='text/javascript' src="{% static 'App.js' %}"></script>
</head>
<body>

<script type='text/template' id='app_view-template'>
    <div id='app-view' class='row'>
        <div class='col-sm-12 col-md-12 col-lg-12'>

            {% lorem %}
            {% lorem %}
            {% lorem %}
            {% lorem %}
            {% lorem %}
            {% lorem %}

        </div>
    </div>
</script>

    <!--HEADING AND NAVBAR-->
    <nav class='navbar navbar-expand-lg navbar-light navbar-fixed-top bg-light' 
        role='navigation'>
        <a class='navbar-brand' href='#'>Recipes</a>
        <div class='pull-right'>
            <ul class='nav'>
                <li>
                    <button class='btn btn-light'>
                        <span class='material-icons'>add_circle_outline</span>
                    </button>   
                </li>
            </ul>
        </div>
    </nav>

    <!--TARGET FOR TEST VIEW-->
    <div id='app_view-target' class='container'>

    </div>
</body>

1 Ответ

0 голосов
/ 30 мая 2018

Я предполагаю, что вы используете Bootstrap 4

удалите класс navbar-expand-lg

pull-right больше нет в BS4

Добавлено .float-{sm,md,lg,xl}-{left,right,none}классы для отзывчивых операций с плавающей точкой и удаленные .pull-left и .pull-right, поскольку они избыточны до .float-left и .float-right.

Для получения дополнительной информации проверьте официальную документацию .

...