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

标签 html css twitter-bootstrap twitter-bootstrap-3

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

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

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

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

最佳答案

更新

在 768 和 991 像素(小网格)的屏幕宽度之间,我发现了这个:

enter image description here

上面是你说的跳转吗?

可能的解决方案:

  1. 将网格断点设置为 991px
  2. 仅应用 .navbar-else 的 margin-right:100px; 高于 991px
  3. 在您的.nav-brand 中添加中断:

    @media(最小宽度:768px)和(最大宽度:991px){

    .navbar-brand > strong:after { 内容:"\a"; 空白:pre;

  4. 将字体缩小到 992 像素以下

等等

--结束更新 http://getbootstrap.com/components/#navbar 上的示例不要将 .navbar-header 包装在 .container 中。

尝试设置:

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

参见:http://bootply.com/86839

关于html - 尝试通过正确缩放导航栏品牌偏移来获得更短的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19293218/

相关文章:

javascript - 优化 jQuery 代码

javascript - 如何让玩家出现在鼠标悬停时

css - Firefox 和 Safari 中的字体大小不一样

javascript - bootstrap-select 不适用于狭窄的领域

html - Bootstrap 和 CSS 帮助,如图中所示

javascript - 在 Twitter Bootstrap 3 中验证导航

html - 许多人不知道如何在 HTML <select> 控件中多选项目,所以......?

javascript - 如何在 Angular js中使用滚动条打印iframe内容

html - 删除原始边框时如何删除按钮的蓝色突出显示?

html - 使新的 Bootstrap 行向左浮动,同时中断到新行