根据其他引导按钮

Question

首先，我想在一个按钮内垂直和水平地对齐一个glyphicon。到目前为止，我尝试使用CSS属性position: relative;和position: absolute;，请参阅bootply，但它无法正常工作。

其次，当我调整窗口大小时，由于white-space: normal;属性，按钮可以成为两个文本行的高度。 如何实现，在这种情况下，glyphicon按钮将更新其高度，并且glyphicon仍然居中（水平和垂直）。

<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

希望这有点帮助。