时间戳

首页 > 解决方案 > 如何在 Bootstrap 中更改按钮对齐方式（也使用 Angular 8）？

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

问题描述

用 更改按钮的大小后btn-sm，它与我的navbar. 我将如何重新定位它？

在此处输入图像描述

我还Angular 8用来管理我网站的后端（在这种情况下可能会改变一些东西？）；我的上衣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>

标签： htmlcssangularbootstrap-4

解决方案

我无法真正解决问题，但调整此按钮位置的一种方法是为其添加更多边距或填充。例如，mt将在按钮顶部添加边距，希望您能达到足够大的边距。就我而言，我最终使用了：

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

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

推荐阅读