[英]Bootstrap navbar-text alignment issues with small screen sizes
使用此导航栏代码。 (简化,但确认存在相同的问题)。
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}">Kanri</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Dashboard</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbar-text">
John Smith
</li>
<li>
<a class="glyphicon glyphicon-cog"></a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
当放置在较小的屏幕中时,导航栏(如预期的那样)切换为巨大的下拉菜单。 John Smith
没有左侧填充,这使其仅位于屏幕左侧尺寸的边缘,这是不美观的。 有什么我忘记包装的东西吗?
这是一个例子。 John Smith
应该在Kye
,因为这是正在运行的应用程序的屏幕截图。 我简化了代码的可读性,但确保出现相同的问题。
您需要将该名称包装在锚标记中,或为无序列表标记提供一些自定义CSS样式以提供填充。
<li class="navbar-text">
<a href="#">John Smith</a>
</li>
这是您的代码的有效演示; http://www.bootply.com/NiumLenXsu
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.