3

我正在使用 twitter-bootstrap。我想知道你是如何在品牌名称前面放置一个图标的。不知何故，图标似乎也比文本小得多。如何解决这个问题，让它看起来不错？

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
     <div class="container">
      <i class="icon-signal icon-white"></i>
      <a class="brand" href="#">Internett</a>
   </div>
  </div>
4

2 回答 2

4

您可以尝试在.brand标题锚中包含图标，然后将其与一些 css 对齐，如下所示：

CSS

.brand i {
    margin-top: -4px;
    vertical-align: middle;
}

看起来不漂亮，但它确实有效。

演示：http: //jsfiddle.net/andresilich/HGMdM/

于 2012-07-16T00:46:42.423 回答
0

解决方案：

margin:-4px

例子：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><i style="margin:-4px 0; color:pink" class="glyphicon glyphicon-heart"></i> <?= $config->siteName ?></a>
    </div>
      <p class="navbar-text"><i style="color:pink" class="glyphicon glyphicon-heart"></i> <?= $config->siteTagline ?></p>
  </div>
</nav>

内联用于演示。您还可以内联<style>或添加到您的 CSS 文件中。

向 Bootstrap 报告的问题：https ://github.com/twbs/bootstrap/issues/13100

于 2014-03-12T16:32:59.420 回答