【发布时间】：2018-05-30 11:50:29
【问题描述】：
我正在构建一个非常简单的网络应用程序来帮助我轻松编写 Javascript，但我在导航栏上遇到了一些问题（与 js 无关）。我有一个按钮，我想在导航上右对齐，当窗口很小时它工作正常，但是当我最大化窗口时它不再右对齐。右上角的窗口是页面的小版本。
这是最大化的页面：
所以您可以看到，当页面超过一定大小时，按钮不再对齐。我觉得这可能是我遗漏的一些明显的东西（这里对 web 开发人员来说很新），并且想知道是否有某种类型的 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>
【问题讨论】：
标签： html css twitter-bootstrap navbar