如何在引导程序中正确对齐品牌形象

Posted 2023-03-06

【中文标题】如何在引导程序中正确对齐品牌形象

【英文标题】：How to properly align a brand image in bootstrap

【发布时间】：2016-04-02 16:42:21

【问题描述】：

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

我有以下引导代码，它试图显示站点徽标及其名称。我正在使用引导类 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。

【问题讨论】：

Bootstrap 3 Navbar with Logo的可能重复

你检查我的答案了吗？

@herrh 不，它不是这个的副本。

【参考方案1】：

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

padding: 15px 15px;

它是引导程序的默认样式。所以删除它并给出：

.navbar-brand padding: 0;

你已经准备好了。看截图，我给了padding: 0; 看看它的工作原理：

【讨论】：

这并没有真正起作用，因为您也弄乱了文本徽标的 navbar-brand .. 但它确实引导我找到解决方案，即替换 img 上的 navbar-brand 类带有向左拉的标签。

我弄错了。我看错标签了，抱歉。无论如何，被接受为答案，因为它引导我找到答案。

【参考方案2】：

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

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


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

查看工作片段。

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**/

<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/#">[e-mail]</a>
        </li>
        <li><a href="https://localhost:44302/Account/SignOut">Sign Out</a>
        </li>
      </ul>
    </div>
  </div>
</div>

【参考方案3】：

对我来说，在两个锚元素上设置类 d-inline-block 和 align-middle 都有效。我正在使用引导程序 4.3.1。