我正在尝试在同一行上设置两个按钮的样式。在较大的设备上,我希望每个按钮占据显示器的三分之一。在小型设备上,我希望每个按钮占据整个显示屏的一半。
但是当我这样做时,按钮不是很均匀。 (一个略低于第一个)。
这是我的标记。
<div class="row" style="margin-top: 12px">
<div class="col-sm-6 text-center">
<a id="prev-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4">Previous</a>
</div>
<div class="col-sm-6 text-center">
<a id="next-question" href="#" class="btn btn-success col-xs-6 col-sm-4 col-sm-offset-4 disabled">Next</a>
</div>
</div>
有人可以帮我一点吗?
更新
为了更好地阐明我正在尝试的布局,下图大致显示了微型设备(顶部)和更大设备(底部)的布局。 (它不一定是这个,但因为较小的设备有较小的屏幕,我希望这些设备上的按钮更大。)
此外,我怀疑我看到的问题可能与按钮之间没有边距这一事实有关。
答案 0 :(得分:2)
首先使用.container
作为父级,然后使用xs
代替sm
,因为xs
适用于超小型设备。
.row {
margin-top: 12px;
border: red solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 text-center">
<a id="prev-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-4">Previous</a>
</div>
<div class="col-xs-6 text-center">
<a id="next-question" href="#" class="btn btn-success col-xs-12 col-md-4 col-md-offset-2">Next</a>
</div>
</div>
</div>
答案 1 :(得分:1)
您可以将按钮放在这样的嵌套网格列中。
<div class="row " style="margin-top: 12px">
<div class="col-xs-6 text-center">
<div class="row">
<div class="col-xs-12 col-md-4 col-md-offset-4">
<a id= "prev-question" href="#" class="btn btn-success btn-block">Previous</a>
</div>
</div>
</div>
<div class="col-xs-6 text-center">
<div class="row">
<div class="col-xs-12 col-md-4 col-md-offset-3">
<a id="next-question" href="#" class="btn btn-success btn-block">Next</a>
</div>
</div>
</div>
</div>