【问题标题】:Align icon with text in navbar Bootstrap 4将图标与导航栏中的文本对齐 Bootstrap 4
【发布时间】:2018-07-08 16:21:01
【问题描述】:

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

应该是什么样子:

会发生什么:

.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>

【问题讨论】:

    标签: text icons alignment bootstrap-4 navbar


    【解决方案1】:

    您需要像这样将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>

    h4s(和h1s 等)通常是块级元素,这就是它们包装的原因。

    【讨论】:

    • 如果您想避免使用如上所示的本机 Bootstrap 类,则必须增加特异性才能使您的自定义 css 正常工作。换句话说,你需要使用这个:.nav-link h4 { display: inline-block; }
    猜你喜欢
    • 2018-07-14
    • 1970-01-01
    • 2018-09-15
    • 2018-02-03
    • 2020-11-08
    • 1970-01-01
    • 2014-06-14
    • 2017-10-01
    • 1970-01-01
    相关资源
    最近更新 更多