根据其他引导按钮自动调整引导按钮的高度
根据其他引导按钮自动调整引导按钮的高度
提问于 2016-04-22 10:23:41
首先，我想在一个按钮内垂直和水平地对一个图标进行居中。到目前为止，我尝试了CSS属性position: relative;和position: absolute;，请参阅自举，但它不能工作。
其次，当我调整窗口大小时，由于white-space: normal;属性，按钮可以成为两个文本行的高度。我如何实现，在这种情况下，图标按钮将更新他的高度和图标仍然是居中(水平和垂直)。
<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> 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%;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-22 10:39:33
首先，删除所有的position:absolute/relative。删除后，它将看起来已经整洁，然后您想要左按钮采取完全宽度的col-md-2，所以你给它width 100%。您还应该对较小的设备使用col-sm和col-xs规则。这将修复左边的按钮。
现在，您希望左边按钮的高度与较小设备上的右按钮的高度相同，为此，我使用了media queries，并给它一个padding: 16px 0;
根据您想要的断点位置，您应该使用所需的px来调整媒体查询
见更新的引线
希望这能帮点忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36791200
复制相关文章
相似问题
腾讯云开发者
