无法设置离子按钮栏的高度答案

【问题标题】：Trouble setting the height of ionic button-bar无法设置离子按钮栏的高度
【发布时间】：2017-08-08 22:37:59
【问题描述】：

我正在使用 ionic 框架创建一个移动应用程序。我想将按钮栏调整为小一点。我尝试了以下代码，但似乎没有任何反应。

    <div class="button-bar" style="height:1%;">
        <button class="button button-outline button-full button-energized"><b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

【问题讨论】：

标签： html css angularjs ionic-framework

【解决方案1】：

因为我实际上不能在 jsfiddle 中使用离子类。请尝试以下操作：

    <div class="button-bar" style="height:50px;">
        <button class="button button-outline button-full button-energized">  <b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

尝试实际使用像素值而不是 %。在这种特定情况下，百分比不会给你想要的结果。只有当父容器具有设定的高度时，百分比才会起作用。

另外，您可以尝试像这样定位单个按钮：

       <div class="button-bar"">
            <button class="button button-outline button-full button-energized" style="height:50px;>  <b>Connection</b></button>       
            <button class="button button-outline button-full button-energized" style="height:50px;><b>
            My Music</b></button>    
        </div>

我个人建议创建一个单独的样式表来完成此操作，并直接以按钮栏或按钮为目标，如下所示：

CSS：

.button {
  height: 50px;
}

或

.button-bar {
  height: 50px;
}

【讨论】：

【解决方案2】：

我认为 ionic.css 中的按钮添加了一些最小高度。使用 .button-bar .button {min-height: some px}

覆盖它

【讨论】：

你太棒了。