設置離子按鈕杆的高度問題

Question

我正在創建一個帶有離子框架的移動應用程序。我想調整按鈕欄一點點。我試了下面的代碼，似乎沒有任何事情發生。

<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> 

Answer 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; 
} 

Answer 2

我認爲在ionic.css中有一些最小高度的增加按鈕。使用.button-bar .button {最小高度：一些px}覆蓋它。