html - 尝试通过正确缩放导航栏品牌偏移来获得更短的导航栏

Question

我只是想不出一种方法来实现更短的导航栏，并正确缩放导航栏品牌偏移。

当我尝试对导航栏的最大宽度或边距使用百分比值时，它会完全干扰导航栏品牌的偏移。

当我尝试对 margin-right 使用固定值，然后尝试从 .navbar > .container .navbar-brand 更改 margin-left 时，我会得到更好的结果，但有时 .navbar-brand 会跳得很短。

在这里，我有两次不同尝试的引导代码。 http://bootply.com/86804 我希望有人能帮助我。

Answer 1

更新

在 768 和 991 像素（小网格）的屏幕宽度之间，我发现：

以上就是你所说的跳跃吗？

可能的解决方案：

1. 将您的网格断点设置为 991px
2. 仅将 margin-right:100px;.navbar-else 应用于 991px 以上

3. 在 your.nav-brand 中添加一个中断：

   @media（最小宽度：768px）和（最大宽度：991px）{

   .navbar-brand > strong:after { content:"\a"; 空白：pre；}

   }

4. 使您的字体小于 992 像素

等等

--end update http://getbootstrap.com/components/#navbar上的示例没有将 .navbar-header 包装在 .container 中。

尝试设置：

.navbar
{
   width:50%;
}
.navbar-header
{
   padding-left:80px;
}

见：http ://bootply.com/86839