html - 如何在 Bootstrap 中更改按钮对齐方式(也使用 Angular 8)？

Question

在使用 btn-sm 更改我的按钮的大小后，它与我的 navbar 上的其他社交图标按钮错位了。我如何使它重新居中？

我还使用 Angular 8 来管理我网站的后端 ( maybe that changes something in this case? )；我的顶级 navbar 属于 navbar navbar-expand navbar-light bg-light flex-column flex-md-row 类。

<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row">

  <a 
    class="navbar-brand mr-0 mr-md-2"
    routerLink="/">
      {{ title }}
  </a>

  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li 
        class="nav-item" 
        *ngFor="let itemNavbar of itemsNavbar">
          <a 
            [routerLink]="itemNavbar['page']"
            [routerLinkActiveOptions]="{exact: true}"
            routerLinkActive="active" 
            class="nav-link p-2">
              {{ itemNavbar[langNavbar] }}
          </a>
      </li>
    </ul>
  </div>

  <ul class="navbar-nav ml-md-auto">
    <li 
      class="nav-item"
      *ngFor="let socialIcon of socialIcons">
        <a
          class="nav-link"
          href="{{ socialIcon.link }}">
            <i [ngClass]="socialIcon.icon"></i>
        </a>
    </li>

    <div class="col-md">
      <div ngbDropdown class="d-flex">
        <button 
          class="btn btn-outline-secondary btn-sm" 
          id="dropdownBasic1" 
          ngbDropdownToggle>
            {{ upperCaseFirstLetter(langNavbar) }}
        </button>
        <div 
          ngbDropdownMenu 
          aria-labelledby="dropdownBasic1">
            <a 
              ngbDropdownItem 
              class="langToggle"
              *ngFor="let language of languages"
              (click)="onChangeLanguage(language)">
                {{ upperCaseFirstLetter(language) }}
            </a>
        </div>
      </div>
    </div>
  </ul>

</nav>

Answer 1

我真的无法解决这个问题，但调整此按钮位置的一种方法是通过 adding more margin or padding to it .例如，mt 会在按钮顶部添加边距，希望您能获得足够大的边距。就我而言，我最终使用了:

<a class="btn btn-outline-secondary btn-sm d-inline-block ml-2 mt-1 mr-3">
...

每个边距和填充的数字是 node_modules/bootstrap/scss/_variables.scss 中的 $spacer 变量的乘数。 $spacer 变量默认具有 1rem 测量值。