Bootstrap - 如何向导航栏类添加徽标?

2024-02-24

我想在导航栏品牌内的顶部导航栏添加一个徽标。我希望它随着视口大小而缩放,所以我使用 img-responsive2 类。

导航栏品牌中的图像和文本似乎都换行到下一行。

该页面可以在以下位置查看http://digitalponddesign.com/dev/ http://digitalponddesign.com/dev/

预先感谢您的帮助。

这是我的代码:

Html

   <h2 class="navbar-brand brand-name">
       <a href="index.html"><img class="img-responsive2"       
       src="images/DigitalPondlogo.png">DigitalPond</a>
   </h2>

CSS

.navbar {
margin: 10px 0;

}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}

.nav-container {
padding-top: 8px;
}

.navbar-custom {
font-size: 20px;
background-color: #FFF;

}

我在另一个有效的线程上找到了一个解决方案 - 使用向左拉 class:

 <a href="#" class="pull-left"><img src="/path/to/image.png"></a> 

感谢迈克尔在这个帖子中:

Bootstrap - 如何向导航栏类添加徽标? https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap - 如何向导航栏类添加徽标? 的相关文章

  • 幻灯片引导轮播之间的空白

    我正在网站主页上使用引导轮播作为滑块 当轮播自动滑动时没有问题 但一旦我单击下一个和上一个箭头 幻灯片之间就会出现 140px 宽的空白 我已经检查了 css 并删除了 HTML 中的所有空白 但我一点运气都没有 轮播 HTML div c
  • 如何更改 Bootstrap 按钮的形状

    如何将引导程序中默认的圆角按钮更改为正常的矩形按钮 现在我只能更改按钮的大小颜色或字体 btn lg padding 10px 16px font size 18px line height 1 33 border radius 6px b
  • Bootstrap 中的垂直菜单

    有没有办法使用任何引导类来创建垂直菜单 不是下拉菜单 侧边栏上完全独立的垂直菜单 我可以使用我的 css 创建一个 但只是想知道引导程序中是否有任何内置类 或者可以使用顶部栏通过任何 hack 来完成吗 这个问题现在已经很老了 但如果有人看
  • 引导导航栏后面的空间

    使用引导程序navbar 我试图弄清楚如何使其不隐藏主体部分的顶部 实际上 使用这里推荐的方法可以很好地解决这个问题 Twitter Bootstrap 顶部导航栏阻挡页面顶部内容 https stackoverflow com quest
  • 在移动浏览器中隐藏导航栏

    我正在使用 Twitter Bootstrap 制作一个移动响应网站 当在移动设备上查看网站时 我想完全隐藏顶部导航栏 有人知道如何做到这一点吗 最简单的方法是使用响应式实用程序类 hidden phone and hidden table
  • 使 Flex 子项的高度等于网格列内父项的高度

    我正在尝试构建一个定价表 其中每列都包含一张卡片 我希望所有卡片都拉伸到其父 col 元素的高度 注意 我正在使用 Bootstrap 4 并尝试使用现有的网格系统来实现这一点 为了保持一致性 并使用这个特定的标记 我无法让卡片增长到其父容
  • 如何使字形更大? (改变尺寸?)

    我想让地球字形更大 以便它覆盖页面的很大一部分 它是矢量图像 它不是在按钮或任何东西中 而是在按钮中 它只是孤独的 有没有办法做到这一点 div class jumbotron span class glyphicon glyphicon
  • Bootstrap 轮播中的 Href

    我一直在Interwebz上搜索 但似乎找不到答案 如何在轮播链接中添加 href 我尝试将 a 标签放在 h1 标签之外 但它破坏了滑块本身的功能 这是我的代码 div class col sm 12 div class carousel
  • 单击菜单外部以关闭菜单时,Bootstrap 导航栏“闪烁”

    我遇到了导航栏问题 当您单击菜单外部以关闭菜单时 导航栏会出现 闪烁 如果在单击菜单外时按住鼠标 则闪烁会持续存在 如下所示 我认为这可能与角度有关 而不是与CSS有关 主要是因为其他人未能在小提琴上复制它 上一个问题在这里 https s
  • Bootstrap 使用 React js 崩溃

    您好 我正在尝试在反应视图中使用引导折叠 但它不起作用 这很简单 但我不明白发生了什么 return div div
  • Bootstrap 4:卡片作为具有相同高度和宽度的网格

    我正在尝试在具有相同高度和宽度的网格中订购卡片 这些卡片将有不同的内容和不同的尺寸 每行也应该有 3 个 每行的高度可以不同 但 行内的高度应该相同 整个网格中每张卡片的宽度应该相同 div class container div clas
  • Bootstrap 全角,有 2 种不同的背景(和 2 列)

    这有点难以解释 这就是为什么我在谷歌上也找不到答案 我正在使用 Bootstrap 3 并且需要全宽背景图像 在那 2 个透明颜色背景之上 我制作了一个示例图片以使其更清楚 1 2 组合透明彩色背景 3 4 组合透明彩色背景 1 2 3 4
  • Twitter 引导工具提示不适用于全日历中的事件

    我想显示有关事件的引导工具提示亚当 肖的完整日历 http fullcalendar io 我尝试了这段代码 eventMouseover function event jsEvent this tooltip this css rel t
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • BootStrap3 单击该项目后保持下拉菜单打开

    我正在使用 Bootstrap 3 0 它具有出色的下拉菜单 如果我单击下拉菜单之外的区域 菜单就会消失 这没关系 但是当我单击下拉菜单项时 菜单消失 我不希望发生这种情况 并且没有选项可以控制切换行为 我希望菜单在单击其中一项后保持打开状
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 属性中的角度表达式

    我有一个使用 Angular 的页面 其中我从引导程序实现了弹出窗口 img class state msg 数据内容无法正确呈现 它按字面意思返回 item status message 而不是 message 的值 角度在 数据 属性中
  • 扩展引导程序预输入的宽度以匹配输入字段

    我知道这个问题之前至少被问过三次 但我看到的答案并不是我想要的 我希望增加 twitter bootstrap 通过其 typeahead 功能生成的自动完成字段的宽度 我一直在读到它延伸到覆盖该字段中的所有文本 也就是说 文本越长 自动完
  • Twitter Bootstrap - 多图像(缩略图)轮播 - 一次移动一个缩略图

    我正在尝试 Twitter bootstrap 3 我对 HTML CSS 和 Javascript 还很陌生 我有一个我创建的轮播 它的代码如下所示 div class container div class carousel slide
  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人

随机推荐