Question

我试图将项目定位为：

所以我改变后的标记is here

<div class="container">

  <div class="row">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll col-4">
      <button type="button" class="navbar-toggle" (click)="isCollapsed = !isCollapsed">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand" href="#/">Home</a>
      <a class="navbar-brand" href="#/report">Report</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="searchBox col-4" [collapse]="isCollapsed">
      <form class="navbar-form  search">
        <div class="form-group">
          <!--</typeahead>-->
          <input [(ngModel)]="country"
                 [typeahead]="countries"
                 autocomplete="off"
                 (typeaheadOnSelect)="countrySelected($event)"
                 class="form-control searchInput" [ngModelOptions]="{standalone: true}"/>

          <div class="btn-group" dropdown>
            <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
              {{selectedSearchType.name}} <span class="caret"></span>
            </button>
            <ul dropdownMenu class="dropdown-menu" role="menu">
              <li *ngFor="let type of searchType;  let i = index;" role="menuitem">
                <a (click)="onTypeChange(type)" class="dropdown-item cursor-pointer">{{type.name}}</a>
              </li>
            </ul>
          </div>

        </div>


      </form>
    </div>

    <div class="col-4">
      <button type="button" class="btn btn-primary" (click)="loadFromSheet()">
        <span class="glyphicon glyphicon-paste"></span>
        Load from sheet
      </button>
    </div>

  </div>
</div>

但似乎是这样的：

如何解决此问题，以便"load"按钮位于最右侧？

Answer 1

您可以尝试将col-md-4更改为col-md-3或更少，并使用margin-left按钮上的Load属性操纵按钮之间的间距。你可能正在推动button到下一行，所以如果没有找到成功，请检查围绕其他元素的CSS属性的paddings和margins。

希望这有帮助。

如何将按钮对齐（bootstrap 3.6）

1 个答案: