HTML
<div id="panel">
<form method="POST" action="">
<select class="form-control" id="sel1" name="veh_id">
<option>1</option>
<option>1</option>
<option>1</option>
</select>
<input type="submit" value="GO" id="submit">
</form>
</div>
CSS
#panel {
position: absolute;
left:32%;
z-index: 5;
background-color: transparent;
border: dashed 2px black;
overflow: hidden;
}
#submit {
display: block;
float: right;
height: 35px;
width: 63px;
overflow: hidden;
}
#sel1 {
min-width:425px;
width:425px;
border: none;
float: left;
overflow: hidden;
}
以下 div panel
位于大屏幕的中心,但在手机(小屏幕)上整个 div 会混淆。我努力了,但没有成功。
最佳答案
如果您正在使用 bootstrap 并尝试将事物居中,则不应使用 left 或其他方式插入元素。这可以使用 Bootstrap 帮助程序类非常简单地完成
我不确定这是否 100% 符合要求,但应该有所帮助。我剥离了大部分提供的 css 以使用 Bootstrap ,
占屏幕 50% 的列(居中),类似
<div class="col-sm-6 col-sm-push-3"></div>
然后相应地设计按钮样式。我不确定为什么你在包装上有 absolute ,但如果你需要它仍然可以使用。
你也同时使用了
display: block;
float: right;
这将导致按钮呈现为新行,但随后您有固定宽度,因此它会自动向右移动。
希望对你有帮助,
关于css - 如何使用按钮居中 div (Bootstrap Responsive),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30329459/