css - 如何使用按钮居中 div (Bootstrap Responsive)

Question

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 会混淆。我努力了，但没有成功。

Answer 1

如果您正在使用 bootstrap 并尝试将事物居中，则不应使用 left 或其他方式插入元素。这可以使用 Bootstrap 帮助程序类非常简单地完成

我不确定这是否 100% 符合要求，但应该有所帮助。我剥离了大部分提供的 css 以使用 Bootstrap ，

占屏幕 50% 的列(居中)，类似

<div class="col-sm-6 col-sm-push-3"></div>

然后相应地设计按钮样式。我不确定为什么你在包装上有 absolute ，但如果你需要它仍然可以使用。

你也同时使用了

display: block;
float: right;

这将导致按钮呈现为新行，但随后您有固定宽度，因此它会自动向右移动。

希望对你有帮助，

http://jsfiddle.net/1rLn0art/