引導響應和選擇框

我有一個非常簡單的形式。下面的代碼是一個簡化版本，只有一行選擇和所有的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

引導響應和選擇框

回答

相關問題