他のブートストラップボタンに応じてブートストラップボタンの高さを自動的に調整する

Question

まず、ボタンの内側にグリフコンを縦横に配置したいと思っています。これまでのところ、CSS属性position: relative;とposition: absolute;を試しましたが、bootplyを参照してください。しかし動作しません。

第2に、ウィンドウのサイズを変更すると、white-space: normal;属性のためにボタンが2つのテキスト行の高さになることがあります。 この場合、グリフコンボタンは高さを更新し、グリフコンは中央（水平および垂直）に配置されます。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-2"> 
     <button type="button" class="btn btn-primary" id="fullscreenButton"> 
     <span id="fullscreenButtonGlyphicon" class="glyphicon glyphicon-fullscreen gylphiconInsideButton"></span> 
     </button> 
    </div> 
    <div class="col-md-5"> 
     <button type="button" class="btn btn-primary btn-block" id="showAllGpsMarker"> 
     <span class="glyphicon glyphicon-map-marker"></span>&nbsp;long long long long long long long long long long long text 
     </button> 
    </div> 
    </div>  
</div> 

CSS：

#showAllGpsMarker{ 
    white-space: normal; 
} 

#fullscreenButton { 
    width:100%; 
    position: relative; 
} 
#fullscreenButtonGlyphicon{ 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

Answer 1

まず第一に、すべてのposition:absolute/relativeを削除します。取り外した後はすでにきれいに見えますが、左ボタンをcol-md-2の全幅にして、width 100%とします。また、小さいデバイスにはcol-smとcol-xsのルールを使用する必要があります。これにより、左ボタンが固定されます。

今、あなたは私がmedia queriesを使用して、あなたが調整する必要があり、あなたのブレークポイントを持つようにしたい場所に応じてそれをpadding: 16px 0;

を与えた。このため、小型デバイスの右ボタンと同じ高さを取るために、左のボタンをしたいです必要px

とメディアクエリは、このビットを助け更新Bootply

希望を参照してください。