调整大页面上的小表单大小

Question

我有这个非常小的用户个人资料表单。

重点是：表单/字段应该很小但页面很大。我不需要这个字段占据整个页面。

所以我想做的是缩小字段。

目前的结构是菜单的2/12和表格的10/12。

我能做到的一种方法是简单地将表格放在较小的列中，例如4/12或5/12。但问题是当页面调整为智能手机时，例如表格应该再次占据整个页面，例如10/12。

页面在哪里：

代码在哪里：

<div class="row">

        <div class="col-md-12">

          <div class="row">

            <div class="col-md-2">

              <ul class="list-group">
                <a href="#" class="list-group-item"><strong>Profile</strong></a>
                <a href="my-account-password.html" class="list-group-item">Password</a>
              </ul>

            </div> <!--/col-md-2-->

            <div class="col-md-10">

              <form>
                <div class="form-group">
                  <label for="inputName">Name:</label>
                  <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
                </div>
                <div class="form-group">
                  <label for="inputLastName">Last Name:</label>
                  <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
                </div>
                <div class="form-group">
                  <label for="inputTitle">Title:</label>
                  <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
                </div>
                <div class="form-group">
                  <label for="inputEmail">Email:</label>
                  <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie@acmecorp.com">
                </div>
                <div class="form-group bottom-buffer">
                  <label for="selectEmail">Notifications:</label>
                  <select class="form-control" id="selectEmailNotifications">
                    <option>None</option>
                    <option>Daily</option>
                    <option>Weekly</option>
                    <option selected>Monthly</option>
                  </select>
                  <p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
                </div>
                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
              </form>

            </div> <!--/col-md-10-->

          </div><!--/row -->

        </div><!--col-md-12-->

      </div><!--/row-->

Answer 1

如果您想在小屏幕中调整大小，请使用 col-xs （超小型设备和手机（＆lt; 768px））和 col -sm （小型设备和平板电脑（≥768px））类。如果您不希望表单水平覆盖整个页面，您还可以使用 col -..- offset - .. 类为表单提供保证金。

  <div class="row">

    <div class="col-md-12 col-sm-12 col-xs-12">

      <div class="row">

        <div class="col-md-2 col-sm-2 col-xs-2">

          <ul class="list-group">
            <a href="#" class="list-group-item"><strong>Profile</strong></a>
            <a href="my-account-password.html" class="list-group-item">Password</a>
          </ul>

        </div> <!--/col-md-2 col-sm-2 col-xs-2-->

        <div class="col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2">

          <form>
            <div class="form-group">
              <label for="inputName">Name:</label>
              <input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
            </div>
            <div class="form-group">
              <label for="inputLastName">Last Name:</label>
              <input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
            </div>
            <div class="form-group">
              <label for="inputTitle">Title:</label>
              <input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
            </div>
            <div class="form-group">
              <label for="inputEmail">Email:</label>
              <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie@acmecorp.com">
            </div>
            <div class="form-group bottom-buffer">
              <label for="selectEmail">Notifications:</label>
              <select class="form-control" id="selectEmailNotifications">
                <option>None</option>
                <option>Daily</option>
                <option>Weekly</option>
                <option selected>Monthly</option>
              </select>
              <p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
            </div>
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
          </form>

        </div> <!--/col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2-->

      </div><!--/row -->

    </div><!--col-md-12 col-sm-12 col-xs-12-->

  </div><!--/row-->

Answer 2

如果您使用的是bootstrap Framework，则可以使用col-xs for mobile，col-sm for portrait tablet和col-md for landscape tablet来定义col-div的行为。见http://getbootstrap.com/css/#grid

如果您觉得受默认定义的限制，您还可以扩展网格系统，编写更具体的媒体查询，例如：用于xxl屏幕