Question

我有一个非常简单的表格。下面的代码是一个精简版本，只有一行os选择并删除所有的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”，但没有区别。

Answer 1

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

Answer 2

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

Bootstrap响应和选择框

2 个答案: