离子 - 改变离子搜索条的宽度

Question

我想知道如何更改离子搜索栏的宽度及其容器类＆＃34; toolbar-content＆＃34;在Ionic 3中

我可以简单地创建一个具有这些css属性的类来改变搜索栏的宽度：

width: 90%;
margin: auto;

但是，这会使其自动生成的容器div仍具有完整的原始宽度。

以下是上面提到的css搜索栏的内容

然而，容器div仍然具有全宽。 （见下图）

如图所示，尽管实际的离子搜索栏宽度发生了变化，但仍然存在一个带有toolbar-content类的div，它不会改变宽度。

我已经尝试覆盖toolbar-content和toolbar-content-ios类的宽度，但是，这似乎不起作用。

以下是使用的标头的HTML：

<ion-header>
    <ion-navbar mode="ios">
        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="settings"></ion-icon>
            </button>
        </ion-buttons>
        <ion-searchbar id="home-search" placeholder="Search Groups & Connections" (ionInput)="filterItems($event)" (ionClear)="resetFilter($event)"></ion-searchbar>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

非常感谢您的时间，我们将非常感谢您正确方向的任何建议或指示！

Answer 1

通过将此CSS添加到离子按钮来解决它：

margin: auto;
flex-basis: 50px;

原来搜索栏会填满剩下的空间，两边的按钮将按照我想要的方式居中。