无法在 header 中将我的菜单按钮对齐到左侧

Question

我参考了我的 button 按照上述 link 左右对齐 start 和 end 键。但是我无法根据 link 中的视图设置我的按钮，这是我的输出图像

这是我的代码

<ion-header class="home">
  <ion-navbar primary padding>
    <ion-row> 
      <ion-buttons start>
      <button menuToggle >
        <ion-icon name="menu"></ion-icon>
        
      </button>
      </ion-buttons>
        
      <ion-title>Auto Parts</ion-title>
        
      <ion-buttons end>
            <button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="cart"></ion-icon></button>
      </ion-buttons>
    </ion-row>
    
    <ion-row>
      <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
    </ion-row>

  </ion-navbar>

</ion-header>

目前我尝试过的是：

float: right; and float: left;

algin: right

但无法将我的按钮移到左侧

Answer 1

您可以通过使用 <ion-toolbar> 放置搜索栏来实现该布局，就像您在 this plunker

中看到的那样

<ion-header class="home">
  <ion-navbar primary padding>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Auto Parts</ion-title>
      <ion-buttons end>
            <button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="cart"></ion-icon></button>
      </ion-buttons>
  </ion-navbar>
  <ion-toolbar primary>
      <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

编辑：

To hide both borders, the no-border attribute should be used on the ion-toolbar. To hide the top or bottom border, the no-border-top and no-border-bottom attribute should be used.

无法在 header 中将我的菜单按钮对齐到左侧

Not able to align my menu button on left side in header

html

css

sass

ionic2