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

如果您正在使用引导程序并试图将事物放在中心位置，那么您不应该使用左侧和不使用左侧的元素。这可以使用引导辅助类

非常简单地完成

我不确定这是否符合100％的费用但应该有所帮助。我剥离了大部分提供的css来使用bootstrap，

一个50％的屏幕（居中）的列，类似于

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

然后相应地设置按钮。我不确定为什么你对包装器有绝对性，但是如果你需要它仍然可以使用它。

你也同时使用

display: block;
float: right;

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

希望这会有所帮助，

http://jsfiddle.net/1rLn0art/

Answer 2

#panel {
    position: relative;
    margin: 0 auto;
    background-color: transparent;
    border: dashed 2px black;
    display: block;
    width:500px;
}
#submit {
    height: 35px;
    width: 63px;
}
#sel1 {
    min-width:425px;
    border: none;
}

将CSS更改为此。你这里有很多不相关的CSS。您应该转到MDN并找出这些css属性的含义。

以div为中心，margin: 0 auto;是一种有用的方法。将div设置为width，使其display: block. margin: 0 auto;清除所有浮动。

http://codepen.io/anon/pen/VLjgXR

如何使用按钮居中div（Bootstrap Responsive）

2 个答案: