Question

它不是this的副本。这个问题是关于用图像替换文本徽标。这个问题是关于在文本徽标之外放置图像。

我有以下引导代码，试图显示网站徽标后跟其名称。我正在使用bootstrap类navbar-brand来执行此操作：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <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="./EnterpriseCopy_files/EnterpriseCopy.html">
                <img src="./EnterpriseCopy_files/android-icon-48x48.png">
            </a>
            <a class="navbar-brand" href="./EnterpriseCopy_files/EnterpriseCopy.html">Enterprise Copy</a>
        </div>
        <div class="navbar-collapse collapse">

徽标最终看起来像这样：

然后，我必须将style="margin-top:-13px"添加到img标记，以便提升图片并使其看起来不错：

这不是正确的方法。有没有更好的方法呢？

原始代码here，其中包含样式调整here。

Answer 1

问题在于.navbar-brand有填充：

padding: 15px 15px;

它是bootstrap的默认样式。所以删除它并给出：

.navbar-brand {padding: 0;}

你们都准备好了。请参阅屏幕截图，我在其中padding: 0;看到它的工作原理：

Answer 2

如果要在navbar-brand类中添加图片和文字而不是将它们分开，请将display: inline-block应用于您的img，然后调整navbar-brand自身的填充以适应所有内容。

.navbar .navbar-brand {
  padding: 2px 15px;
}

.navbar .navbar-brand img {
  display: inline-block;
}

请参阅工作代码段。

＆＃13;

body {
  padding-top: 50px;
  padding-bottom: 20px;
}
/* Wrapping element */

/* Set some basic padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */

input,
select,
textarea {
  max-width: 280px;
}
/* Carousel */

.carousel-caption {
  z-index: 10 !important;
}
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .carousel-caption {
    z-index: 10 !important;
  }
}
/**ADDED CSS**/

.navbar .navbar-brand {
  padding: 2px 7.5px;
}
.navbar .navbar-brand img {
  display: inline-block;
}
/**ADDED CSS**/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <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="./EnterpriseCopy_files/EnterpriseCopy.html">
        <img src="http://vbrad.com/misc/EnterpriseCopy_files/android-icon-48x48.png">Enterprise Copy
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Mailbox</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Copy Groups</a>
        </li>
        <li><a href="./EnterpriseCopy_files/EnterpriseCopy.html">Home</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://localhost:44302/#">bar@foo.com</a>
        </li>
        <li><a href="https://localhost:44302/Account/SignOut">Sign Out</a>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 3

对我来说，在两个锚元素上设置类d-inline-block和align-middle可以正常工作。我正在使用Bootstrap 4.3.1。

如何在bootstrap中正确对齐品牌形象

3 个答案: