引导响应和选择框

我有一个非常简单的形式。下面的代码是一个简化版本，只有一行选择和所有的PHP代码被删除，但仍然显示我的问题。当在大屏幕上时，标签和两个选择很好地排列起来。在小屏幕上时，所有东西都垂直放置。有足够的空间让东西紧挨着，所以当移动到小屏幕时不需要改变布局。我应该重写Waht类来保持事物排列？（我知道我真的不需要Bootstrap，但我认为这是一种学习体验）。引导响应和选择框

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Alarmtijden &middot; Twitter Bootstrap</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 


    <style type="text/css"> 
     body { 
     padding-top: 40px; 
     padding-bottom: 40px; 
     background-color: #f5f5f5; 
     } 

     .form-signin { 
     max-width: 250px; 
     padding: 19px 29px 29px; 
     margin: 0 auto 20px; 
     background-color: #fff; 
     border: 1px solid #e5e5e5; 
     -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
       border-radius: 5px; 
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
       box-shadow: 0 1px 2px rgba(0,0,0,.05); 
     } 

     .control-label2 { 
     float: left; 
     width: 100px; 
     padding-top: 5px; 
     } 

     .controls2 { 
     *display: inline-block; 
     *padding-left: 0px; 
     margin-left: 0px; 
     margin-top: 10px; 
     *margin-left: 0; 
     } 
     .controls3 { 
     *display: inline-block; 
     *padding-left: 0px; 
     margin-left: 180px; 
     *margin-left: 0; 
     } 

    </style> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="../assets/js/html5shiv.js"></script> 
    <![endif]--> 

</head> 

    <body> 

<div class="container"> 
    <div class="form-signin"> 
    <div class="row-fluid"> 
     <form class="form-horizontal" action="alarms.php" method="post" id="alarms"> 
     <fieldset> 
      <div id="legend"> 
      <legend class=""> <h2>Alarmtijden</h2></legend> 
      </div> 


      <!-- Alarm1--> 
      <div class="control-group"> 
      <label class="control-label2" for="password"><h4>Alarm 1 </h4></label> 
      <div class="controls2"> 
       <select class="span3" name="t_uur1" id="t_uur1"> 
       <option value="0">00</option> 
       <option value="01">01</option> 
       <option value="02">02</option> 
       <option value="03">03</option> 
       <option value="04">04</option> 
       <option value="05">05</option> 
       <option value="06">06</option> 
       <option value="07">07</option> 
       <option value="08">08</option> 
       <option value="09">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
       <option value="16">16</option> 
       <option value="17">17</option> 
       <option value="18">18</option> 
       <option value="19">19</option> 
       <option value="20">20</option> 
       <option value="21">21</option> 
       <option value="22">22</option> 
       <option value="23">23</option> 
       </select>&nbsp;:&nbsp; 
       <select class="span3" name="t_minuut1"> 
       <option value="00">00</option> 
       <option value="10">10</option> 
       <option value="20">20</option> 
       <option value="30">30</option> 
       <option value="40">40</option> 
       <option value="50">50</option> 
       </select> 
      </div> 
      </div> 

     <!-- Submit --> 
      <div class="control-group"> 
      <div class="controls3"> 
       <button class="btn btn-primary" name="submit" id="submit" type="submit">Set</button> 
      </div> 
      </div> 

     </fieldset> 
     </form> 
     </div> 
    </div> 
</div> <!-- /container --> 



    </body> 
</html>

我也试过“form-inline”而不是“form-horizontal”，但这没什么区别。

来源

2013-04-26 ArjenA

如果它不会在小屏幕上垂直对齐，那么你会得到水平滚动条，这是不好的做法。

来源

2013-04-26 10:43:39 SuperManSL

通常情况是这样，但是这种布局只有250像素宽，所以即使在手机屏幕上也有足够空间容纳所有元素而不需要滚动条。 – ArjenA 2013-04-26 10:50:53

我的建议是，你应该使用媒体查询，你应该浮动：留下所有的DIV。如果这不起作用，那么您的选择框将为该分辨率扩大。

来源

2013-04-26 12:47:33 SuperManSL

当然，就像我说的，你并不需要Bootstrap。通常我会使用媒体查询，但是这个网站的其余部分是在Bootstrap中设置的，所以我认为这也应该是可能的。 Bootstrap响应式处理媒体查询，但不以我想要的方式。所以我的问题仍然存在，在Bootstrap中重写什么来保持选择对齐。 – ArjenA 2013-04-26 16:21:22

如果您将自己的特定类/ ID添加到DIV，则可以使用媒体查询和浮动：left！important;对于那些DIV。这将覆盖bootstram的默认CSS。 – SuperManSL 2013-04-26 18:02:31

引导响应和选择框

回答

相关问题