代码之家 › 专栏 › 技术社区 › KevinM

在导航栏引导程序4中将图标与文本对齐

navbar bootstrap-4 alignment icons text

KevinM · 技术社区 · 7 年前

我正在尝试将图标放在导航按钮中的文本之前。然而,它总是出现在上面。此外,图标必须与文本垂直对齐。这一定很容易纠正,但无法解决。非常感谢您的反馈。

应该是什么样子:

发生的情况:

.nav-link {
  display: inline-block;
}

<ul class="navbar-nav mx-auto w-100">
      <li class="nav-item">
      <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
        <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
        <h4>Test 1</h4>
      </a>
    </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
          <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
          <h4>Test 2</h4>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
          <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
          <h4>Test 3</h4>
        </a>
      </li>
</ul>

1 回复 | 直到 7 年前

WebDevBooster 7 年前

您需要添加 class="d-inline" 对于h4元素,如下所示:

<ul class="navbar-nav mx-auto w-100">
   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
           <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
           <h4 class="d-inline">Test 1</h4>
       </a>
   </li>

   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
           <img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
           <h4 class="d-inline">Test 2</h4>
       </a>
   </li>

   <li class="nav-item">
       <a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
           <img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
           <h4 class="d-inline">Test 3</h4>
       </a>
   </li>
</ul>

h4 s(和 h1 s等)通常是块级元素,这就是它们包裹的原因。

推荐文章

Riddhi · 在ionic中对齐按钮

7 年前

Joshua Sparkel · 排列的元素相差几个像素

7 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

7 年前

Josh Rodgers · 居中网格项目

7 年前

Jean Jacquemier · Apache箭头、对齐和填充

7 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

7 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

7 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

7 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

7 年前

Sujal · UIAlertController中的居中对齐图像操作

7 年前