我想使用Bootstrap 3默认导航栏的图像标志,而不是文本品牌。什么是正确的方法来做到这一点,而不引起任何问题与不同的屏幕尺寸?我认为这是一个常见的需求,但我还没有看到一个好的代码示例。除了在所有屏幕尺寸上都有可接受的显示外,一个关键要求是小屏幕上的菜单可折叠性。

我试着在有navbar-brand类的A标签内放置一个IMG标签,但这导致菜单不能在我的android手机上正常运行。我还尝试了增加导航栏类的高度,但这把事情搞砸了。

顺便说一下,我的logo图像比导航栏的高度要大。


当前回答

另一种方法是在.navbar-brand旁边实现Bootstrap内置的.text-hide类,用背景图像替换品牌文本/内容。

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

这是一个非常一致的方法,保持你的图像居中。要调整图像的大小,你需要做的就是调整.navbar-brand宽度,因为高度已经设置好了。

这是现场演示

其他回答

虽然你的问题很有趣,但我不认为会有一个答案。也许你的问题太宽泛了。 你的解决方案应该取决于:导航栏中的其他内容(条目的数量),你的logo的大小,你的logo是否响应,等等。 在a中添加logo(使用navbar-brand)似乎是一个很好的起点。我应该使用navbar-brand类,因为这将添加一个15像素的填充(顶部/底部)。

我在http://getbootstrap.com/examples/navbar/上用300x150像素的logo测试了这个设置。

全屏> 1200:

768到992像素之间(菜单未折叠):

<768(菜单折叠)

除了美学方面,我没有发现任何技术问题。在小屏幕上,大标志可能会重叠或打破视口。 在768到992像素之间的屏幕上,当内容不在一条线上时,还会出现其他问题,例如:https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

默认的导航栏示例添加了一个30px的底边距,所以你的导航栏的内容永远不会与你的页面的内容重叠。(固定导航栏会有问题时,导航栏的高度变化)。

您将需要一些css和媒体查询,以适应导航栏在不同屏幕尺寸上的需要。请缩小你的问题范围。B.e.描述一下你在android上发现的问题。

更新示例请参见http://bootply.com/77512。

在手机等较小的屏幕上,折叠菜单出现在logo上方

在代码中转换按钮和logo,首先是logo(设置float: logo上的左)

除了顶部,没有办法将菜单项对齐到任何地方

为.navbar-collapse ul设置margin-top。使用标志高度减去导航栏高度,以对齐到底部或(标志高度-导航栏高度)/ 2到中心

<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

请理解你自己的努力代码:D这是我的草案代码,它已经工作:)这里是截图。

我还通过css后台属性实现它。它在任何宽度值下都能正常工作。

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

对于这个问题,最简单和最好的答案是根据你的logo设置最大宽度和高度,图像的最大高度为50px,但不超过200px。

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

这取决于你的logo大小和你的导航栏项目。

演示如何创建一个引导导航栏,其中logo的高度大于默认高度(50px):

示例:100px x 100px的标志,标准CSS:

Compute the height and (padding top + padding bottom) of the logo. Here 120px (100px height + padding top (10px) + padding bottom (10px)) Goto bootstrap / customize. Set instead of navbar height 50px > 120px (50 + 70) and navbar-collapse-max-height from 340px to 410px (340 + 70). Download css. In this example I use this navbar. In navbar-brand: <div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>... add a class, for example myLogo, and an img (your logo) <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>. Add CSS .myLogo { padding: 10px; } Adequate to other sizes.

例子