1

私は非常にシンプルなフォームを持っています。以下のコードは、os selects を 1 行だけ削除し、すべての php コードを削除した簡素化されたバージョンですが、それでも私の問題を示しています。大きな画面では、ラベルと 2 つの選択がきれいに並んでいます。小さな画面では、すべてが垂直に配置されます。横に並べるスペースが十分にあるので、小さな画面に移動するときにレイアウトを変更する必要はありません。整列を維持するには、どのクラスをオーバーライドする必要がありますか? （これには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-horizo​​ntal」の代わりに「form-inline」も試しましたが、違いはありません。

4

2 に答える 2

0

私のアドバイスは、メディア クエリを使用し、すべての DIV を float:left にすることです。それがうまくいかない場合は、選択ボックスがその解像度に対して広すぎます。

于 2013-04-26T12:47:33.417 に答える