Question

我正在构建一个非常简单的Web应用程序，以帮助我轻松编写Javascript，我遇到了导航栏的一些问题（与js无关）。我有一个按钮，我想在导航器上对齐，当窗口尺寸很小时它可以正常工作，但是当我最大化窗口时它不再正确对齐。右上角的窗口是页面的小版本。

这是最大化的页面：

因此，当您看到页面超过一定大小时，该按钮不再对齐。我觉得这可能是我所遗漏的一些显而易见的东西（这里对于web dev来说还是新手）并且我想知道是否有某种类型的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>

Answer 1

我假设您使用的是Bootstrap 4

删除课程navbar-expand-lg

BS4中

pull-right已不复存在

为响应式浮动添加了.float-{sm,md,lg,xl}-{left,right,none}个类，并删除了.pull-left和.pull-right，因为它们对.float-left和.float-right是多余的。

有关详细信息，请查看official documentation。

窗口最大化时，导航栏按钮不会对齐

1 个答案: