jquery - 在移动设备上将 Bootstrap 布局从内联表单更改为网格

Question

我有一个复杂的 Web 表单，在一行中包含许多字段。 Bootstrap 内联表单在大屏幕上效果很好。然而，要求是使页面响应，以便内联表单在较小的屏幕(如平板电脑和手机)上转换为 3 列网格布局。

大屏幕上的内联表单:

需要在手机屏幕上布局

这可能吗？这是针对 Bootstrap 3 的。

非常感谢任何提示!

代码片段:

<div class="container">

<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset style="background-color:#F7F7F7">

        <div class="row">
          <div class="form-inline" style="text-align:left">

            <div class="form-group"   style="margin-right:30px;">
                <div class="floating-label-form-group" style="top:-5px;width:180px">
                    <label class="control-label" for="Selection1">Selection1</label>
                    <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                        <option value="" disabled selected>Selection1 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2/option>
                        <option value="3">option 3</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group ">
                <div class="floating-label-form-group">
                    <label class="control-label" for="fName">1st Name</label>  
                    <input id="fName" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>
            <div class="form-group "  style="margin-right:30px">
                <div class="floating-label-form-group">
                    <label class="control-label" for="lName">Last Name</label>  
                    <input id="lName" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:120px">
                    <label class="control-label" for="gender">Gender</label>
                    <select id="gender" name="gender" class="form-control selectpicker" required>
                        <option value="" disabled selected>gender *</option>
                        <option value="1">M</option>
                        <option value="2">F</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

            <div class="form-group">
                <div class="floating-label-form-group" style="top:-5px;width:160px">
                    <label class="control-label" for="selection2">Selection2</label>
                    <select id="selection2" name="selection2" class="form-control selectpicker" required>
                        <option value="" disabled selected>Selection2 *</option>
                        <option value="1">option 1</option>
                        <option value="2">option 2</option>
                    </select>
                </div>
                <span class="help-block with-errors"></span>
            </div>

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

    </fieldset>
</form>

Answer 1

我修改了您的一些 HTML 标记，删除了一些内联样式并添加了一些类。

这是您要查找的内容:

.myform {
  margin-top: 10px;
}
.myform fieldset {
  padding: 10px 20px;
  background-color: #F7F7F7;
}
.myform .form-group {
  display: block;
}
.myform input,
.myform select {
  min-width: 100%;
  border-radius: 0;
}
.myform .double-input {
  margin: 0;
}
.myform .double-input div[class^='col-'],
.myform .double-input div[class*=' col-'] {
  padding-left: 0;
}
.myform .double-input:first-child div[class^='col-'],
.myform .double-input:first-child div[class*=' col-'] {
  padding: 0;
}
@media (min-width: 992px) {
  .control-label {
    text-align: left;
    display: block;
  }
  .myform .double-input:first-child div[class^='col-'],
  .myform .double-input:first-child div[class*=' col-'] {
    padding-right: 3px;
  }
}
@media (max-width: 992px) {
  .myform input,
  .myform select {
    border-top: 0;
    border-right: 0;
    border-left: 0;
  }
  #fName {
    border-right: 1px solid #ccc;
  }
  #gender {
    border-right: 1px solid #ccc;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <form class="myform" data-toggle="validator" role="form" action="" method="post" id="form1">


    <fieldset>

      <div class="row">
        <div class="col-md-2">
          <div class="form-group">
            <div class="floating-label-form-group">
              <label class="control-label" for="Selection1">Selection1</label>
              <select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
                <option value="" disabled selected>Selection1 *</option>
                <option value="1">option 1</option>
                <option value="2">option 2/option>
                  <option value="3">option 3</option>
              </select>
            </div>
            <span class="help-block with-errors"></span>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="fName">1st Name</label>
                  <input id="fName" class="form-control" name="fName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group ">
                <div class="floating-label-form-group">
                  <label class="control-label" for="lName">Last Name</label>
                  <input id="lName" class="form-control" name="lName" type="text" required>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-5">
          <div class="row double-input">
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="gender">Gender</label>
                  <select id="gender" name="gender" class="form-control selectpicker" required>
                    <option value="" disabled selected>gender *</option>
                    <option value="1">M</option>
                    <option value="2">F</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
            <div class="col-xs-6">
              <div class="form-group">
                <div class="floating-label-form-group">
                  <label class="control-label" for="selection2">Selection2</label>
                  <select id="selection2" name="selection2" class="form-control selectpicker" required>
                    <option value="" disabled selected>Selection2 *</option>
                    <option value="1">option 1</option>
                    <option value="2">option 2</option>
                  </select>
                </div>
                <span class="help-block with-errors"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /row -->
    </fieldset>
  </form>