带徽标的Bootstrap 3 Navbar-Java 学习之路

355

我想使用带有图像徽标而不是文本标记的Bootstrap 3默认导航栏 . 在不引起不同屏幕尺寸问题的情况下，这样做的正确方法是什么？我认为这是一个常见的要求，但我还没有看到一个好的代码示例 . 除了在所有屏幕尺寸上具有可接受的显示之外的关键要求是较小屏幕上的菜单可折叠性 .

我尝试将一个IMG标签放在具有navbar-brand类的A标签内，但这导致菜单在我的Android手机上无法正常运行 . 我也尝试过增加导航栏类的高度，但这更加困难 .

顺便说一句，我的徽标图像大于导航栏的高度 .

28 回答

0
为什么每个人都试图以艰难的方式去做？当然，其中一些方法可行，但它们比必要的更复杂 .

好的，首先 - 您需要一个适合您的导航栏的图像 . 您可以通过css height属性调整图像（允许宽度比例），或者您可以使用适当大小的图像 . 无论你决定做什么 - 它的外观取决于你的图像大小 .

出于某种原因，每个人都想用 navbar-brand 将图像粘贴在锚点内，这不是必需的 . navbar-brand 应用图像不需要的文本样式，以及 navbar-left 类（就像拉左，但用于导航栏） . 你真正需要的是添加 navbar-left .
```
<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>
```
您甚至可以使用导航栏品牌项目进行此操作，该项目将显示在图像的右侧 .
回复于 2024-04-20T11:23:41+08:00

144

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

回复于 2024-04-20T11:23:41+08:00

13
完成了很多例子的演示

重要更新：2015年12月21日

目前有一个bug in Mozilla我发现在某些浏览器宽度上使用 MANY DEMOS ON THIS PAGE 打破了导航栏 . 基本上，mozilla bug包括导航栏品牌链接上的左右填充作为图像宽度的一部分 . 但是，这可以很容易地修复，我在这个页面上是最稳定的工作示例 . 它会自动调整大小并适用于所有浏览器 .

Just add this to your css and use navbar-brand the same way you would .img-responsive. Your logo will automatically fit
```
.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}
```
Another option is to use a background image. Use an image of any size and then just set the desired width:
```
.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}
```
以下原始答案（仅供参考）

人们似乎忘了很多对象 . 我个人认为这是最容易使用的，因为图像会自动调整到菜单大小 . 如果您只是在图像上使用对象，它将自动调整大小到菜单高度 .
```
.navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
```
有人指出，这在IE "yet"中不起作用 . 有一个polyfill，但如果您不打算将其用于其他任何事情，那可能会过多 . 对于IE的未来版本，看起来像object-fit是being planned所以一旦发生这种情况，这将适用于所有浏览器 .

但是，如果您在引导程序中注意到.img响应类，则max-width假定您将这些图像放在列中或具有显式set的内容中 . 这意味着100％具体表示父元素的100％宽度 .
```
.img-responsive
        max-width: 100%;
        height: auto;
    }
```
我们不能在导航栏中使用它的原因是因为父（.navbar-brand）具有50px的固定高度，但宽度未设置 .

如果我们采用这种逻辑并根据高度做出响应，我们可以有一个响应式图像，可以扩展到.navbar品牌的高度，并通过添加和自动设置宽度，它将调整到比例 .
```
max-height: 100%;
width: auto;
```
通常我们必须在场景中添加 display:block; ，但因为navbar-brand已经有了float：left;应用于它，它自动充当块元素 .

您可能会遇到徽标太小的罕见情况 . img-responsive方法没有考虑到这一点，但我们会 . 通过将"height"属性添加到 .navbar-brand > img ，您可以放心，它既可以向上扩展也可以向下扩展 .
```
max-height: 100%;
height: 100%;
width: auto;
```
So to complete this I put them both together and it seems to work perfectly in all browsers.
```
<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>
```
DEMO http://codepen.io/bootstrapped/pen/KwYGwq
回复于 2024-04-20T11:23:41+08:00
71

虽然你的问题很有意思，但我不认为会有一个答案 . 也许你的问题太宽泛了 . 您的解决方案应取决于：导航栏中的其他内容（项目数量），徽标大小，徽标是否响应等等 . 在a中添加徽标（使用navbar-brand）似乎是一个很好的起点 . 我应该使用navbar-brand类，因为这将添加15像素的填充（顶部/底部） .

我在http://getbootstrap.com/examples/navbar/上使用300x150像素的徽标测试此设置 .

全屏> 1200：

在768和992像素之间（菜单未折叠）：

<768（菜单已折叠）

除了美学方面，我没有发现任何技术问题 . 在小屏幕上，大徽标可能会重叠或突破视口 . 当内容不适合一行时，768和992像素之间的屏幕也有其他问题，例如：https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

默认导航栏具有默认导航栏示例添加30px的底部边距，因此导航栏的内容不应与页面内容重叠 . （固定导航栏在导航栏高度时会出现问题而异） .

您将需要一些css和媒体查询来根据不同屏幕尺寸的需要调整导航栏 . 请尝试缩小您的问题范围 . 是 . 描述你在android上发现的问题 .

update 有关示例，请参阅http://bootply.com/77512 .

在较小的屏幕（如手机）上，折叠的菜单显示在徽标上方

在代码中交换按钮和徽标，首先是徽标（设置浮动：徽标左侧）

无法将菜单项与顶部以外的任何内容对齐

为 .navbar-collapse ul 设置 margin-top . 使用徽标高度减去导航栏高度，以对齐底部或（徽标高度 - 导航栏高度）/ 2到中心

回复于 2024-04-20T11:23:41+08:00
2
说明如何创建徽标大于默认高度（50px）的引导导航栏：

Example ，标识为100px x 100px，标准CSS：
- 计算徽标的高度和（填充顶部填充底部） . 这里 120px （100px高度填充顶部（10px）填充底部（10px））
- 转到bootstrap / customize . 设置而不是 navbar height 50px> 120px （50 70）和 navbar-collapse-max-height 从340px到 410px （340 70） . Download css .
- 在这个例子中我用navbar . 在 navbar-brand ：
```
<div class="navbar-header">
    ...
    </button>
    <a class="navbar-brand myLogo" href="#">
      <img src="yourLogo.jpg" />
    </a>
  </div>...
```
add 一个类，例如 myLogo ，和 img （您的徽标）

<a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a> .
- 添加 CSS
.myLogo {padding：10px; }
- 适合其他尺寸 .
Example
回复于 2024-04-20T11:23:41+08:00

好吧，我终于遇到了同样的问题，这是我的解决方案，我在我的网站上测试了所有三个主要浏览器：Chrome，Firefox和Internet Explorer .

首先，如果你没有使用基于文本的徽标，那么完全删除“navbar-brand”，因为我发现这个特定的类是我折叠的导航菜单加倍的主要原因 .

向用户3137032大喊大叫，让我朝着正确的方向前进 .

你必须制作一个自定义的响应式图像容器，我称之为“logo”

这是bootstrap HTML标记：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

和CSS代码：

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

@media（max-width：x）中的值可能会有所不同，具体取决于您的徽标图片宽度，我的是368px . 根据徽标的大小，可能还需要更改百分比 . 第一个@media查询应该是你的阈值，我的图像宽度（368px）折叠按钮大小（44px）约60px，它出现在480px，这是我开始响应图像缩放的地方 .

请务必从HTML部分删除我的剃刀语法 . 让我知道如果它解决了你的问题，它固定了我的 .

编辑：对不起，我错过了导航栏高度问题 . 有几种方法可以解决这个问题，我个人用适当的导航栏高度编译Bootstrap LESS，为了我的目的，我使用70px，我的图像高度为68像素 . 第二种方法是在bootstrap.css文件本身，搜索“.navbar”并将min-height：更改为徽标的高度 .

回复于 2024-04-20T11:23:41+08:00

我使用img-responsive类，然后在 a 元素上设置最大宽度 . 像这样：

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

和CSS：

.navbar-brand {
    max-width: 50%;
}

回复于 2024-04-20T11:23:41+08:00

1
我的解决方案是将imss“display：inline-block”添加到img标签中 .
```
<img style="display: inline-block; height: 30px; margin-top: -5px">
```
演示：jsfiddle
回复于 2024-04-20T11:23:41+08:00

您必须使用以下代码：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A类标签必须是“徽标”而非navbar-brand .

回复于 2024-04-20T11:23:41+08:00

-1

这取决于您希望徽标的高度 .

导航栏中的默认 <a> 高度为20px，因此如果您在徽标上指定 height: 20px ，它将很好地对齐 .

不过这对于徽标来说有点小，所以我选择的是：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

这使得图像高30px并通过向顶部添加负边距来垂直对齐图像（5px是a上的填充和图像大小之间差异的一半） .

或者，您可以更改 <a> 元素上的填充，例如：

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>

回复于 2024-04-20T11:23:41+08:00

0
Quick Fix ：为 logo 创建一个类，并将 height 设置为 28px . 这适用于所有设备上的导航栏 . 注意我说工作"WELL" .
```
.logo {
  display:block;
  height:28px;
}
```
回复于 2024-04-20T11:23:41+08:00

我的方法是为手机，平板电脑，桌面，大型桌面包含四种不同大小的不同图像，但只使用bootstrap的响应式实用程序类显示ONE，如下所示：

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

注意：您可以使用提供的代码替换注释行 . 如果你没有使用wordpress，请替换php代码 .

编辑注意2：是的，这会在加载页面时向服务器添加请求，这可能会减慢一些但是如果使用背景css精灵技术，则打印页面时可能无法打印徽标，上面的代码应该得到更好的SEO .

回复于 2024-04-20T11:23:41+08:00

我也通过css后台属性实现它 . 它可以在任何宽度值上保持 Health .

.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
}

回复于 2024-04-20T11:23:41+08:00

0
另一种方法是在 .navbar-brand 旁边实现Bootstrap's built-in .text-hide class，用背景图像替换品牌文本/内容 .

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 宽度，因为已经设置了高度 .

Here's a live demo
回复于 2024-04-20T11:23:41+08:00

我有同样的问题 . 我这样解决了：

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

没有navbar品牌类 . 该结果看起来像适合导航栏的徽标图片，并像链接一样工作 . 另外，我建议对菜单项使用navbar-right类，这样它们就不会低于徽标 .

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

回复于 2024-04-20T11:23:41+08:00

21
也许这太简单了，但我只是复制了导航栏品牌线，所以有两个，图像然后是文本 .
```
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>
```
我创建了一个适合导航栏内部的图像（大约是高度的1/2） .
回复于 2024-04-20T11:23:41+08:00

如果使用LESS，这有效：

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}

回复于 2024-04-20T11:23:41+08:00

14
如果您需要在工具栏中看到以品牌为中心并具有自动宽度，则此代码非常有用 . 它包含Wordpress函数以从正确的路径获取图像文件：
```
<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">
```
回复于 2024-04-20T11:23:41+08:00

您不需要添加额外的CSS，因为Bootstrap3确实提供了它 . 除非您确实想要添加它 . 这是我的代码，将徽标放在左边，链接到右边 . 此导航具有响应性 . 根据需要对此进行更改 .

HTML：

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

回复于 2024-04-20T11:23:41+08:00

我的工作代码 - bootstrap 3.0.3 . 当navbar-toggle，hidden-xs原始徽标图像时 .

<a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>

回复于 2024-04-20T11:23:41+08:00

0
您可以尝试使用@media查询，如下所示 .

首先添加徽标类，然后使用@media指定每个设备大小的徽标高度和宽度 . 在下面的示例中，我定位的是最大宽度为320像素（iPhone）的设备 . 您可以使用它直到找到最合适的设备 . 简单的测试方法：使用带检查元素的chrome或Firefox . 尽可能缩小浏览器的大小 . 根据您指定的@media max宽度观察徽标大小更改 . 在iPhone，Android设备，iPad等上进行测试，以获得理想的效果 .
```
.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}
```
回复于 2024-04-20T11:23:41+08:00

请尝试以下代码：

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

回复于 2024-04-20T11:23:41+08:00

在我的情况下没有做出任何其他答案（我可能没有通过智力测试）并且经过一些实验，这就是我正在使用的（我相信它非常接近Bootstrap默认值）：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <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>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

在CSS文件中，我添加了以下内容：

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

请注意 @Html.ActionLink() 是 <a> 标记的Razor语法 . 它说 @Html.ActionLink(...) 只需用适当的 <a> 标签替换它 . 同样它在哪里说 @Url.Action(...) 用适当的URL替换它（在这种情况下没有 <a> 标签） .

回复于 2024-04-20T11:23:41+08:00

13

这不是语义，但我只使用现有的 a 元素，设置背景图像，然后为@ 2x分辨率，更小的屏幕尺寸等创建多个变体 .

然后，您可以使用 .text-hide 类在页面上获取一些时尚方式的文本 . 虽然没有正确使用图像，但简单有效 .

这是一个指向文本替换的辅助类的链接：

http://getbootstrap.com/css/#helper-classes

回复于 2024-04-20T11:23:41+08:00
389
这个问题的最简单和最好的答案是根据您的徽标设置最大宽度和高度，图像最大高度为50px但不超过200px .
```
<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>
```
这取决于您的徽标大小和您拥有的导航栏项目 .
回复于 2024-04-20T11:23:41+08:00

<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这是我的草稿代码，它已经在运行了:)这是截图 .

enter image description here

回复于 2024-04-20T11:23:41+08:00

而不是替换文本品牌，我分为两行，如下面的代码，并给图像 img-responsive 类......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

另外，我添加了以下css代码.......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

如果我的代码解决了你的问题，我很高兴.....

回复于 2024-04-20T11:23:41+08:00

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <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="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

//不要忘记在代码的头部添加bootstrap .

回复于 2024-04-20T11:23:41+08:00

带徽标的Bootstrap 3 Navbar

28 回答

完成了很多例子的演示

重要更新：2015年12月21日

以下原始答案（仅供参考）

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

说明如何创建徽标大于默认高度（50px）的引导导航栏：

相关问题