我正在尝试在移动设备上将两个按钮放在同一行。这两个按钮在桌面上是在同一行的,但是在移动设备上它们会堆叠在一起。我尝试为 div 类添加 inline-block 标签,但是它们仍然堆叠在一起,尽管大小正确为 50%。
下面是我的 html 代码:
<div class="buttonDiv">
<div class="row">
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">SIGN UP</button>
</div>
<div class="col-lg-6">
<button type="button" class="btn btn-primary btn-custom" id= "buttonCustom">CHECK STANDINGS</button>
</div>
</div>
</div>
以下是相关的CSS:
.buttonDiv{
position:relative;
bottom:90px;
font-family: "Cabin Condensed";
font-weight:700;
display:inline-block;
}
#buttonCustom{
position:relative;
margin-bottom:10px;
height:10%;
width:100%;
}