基于大小的备用布局

Question

我很乐意在我们内部网站的所有未来网页上使用bootstrap。以下图像在所有尺寸的设备上都看起来很棒。

问题是我使用了一行，每行包含两个水平标签和输入。当引导程序调整大小时，行将合并。问题是两列是单独的主题，当设备视图端口较小时，右列应将自身定位在左列下方。相反，他们合并。左列项目1是第一个，然后右栏列项目1是第二个。我也需要它所有左列，然后所有右列。

这个问题的任何方向都会非常有帮助。

<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>

<div class="body">
  <div class="container">
    <form class="form-inline" role="form">

      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>      
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>      
      <div class="row">      
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>      
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>      
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>
      </div>      
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
          <label for="input_test" class="control-label inline">Label</label>
          <div class="form-group">
            <div>
              <input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
            </div>
          </div>
        </div>        
      </div>
      
    </form>
  </div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

   $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

Answer 1

1. id必须是唯一的。

2. col-lg-6 col-md-6 col-sm-12 col-xs-12相当于col-md-6。

3. 用两个<div class="col-md-6"></div>块包裹左右两列字段。

4. 我猜您需要使用Horizontal form代替Inline form。

5. 将标签放入<div class="form-group"></div>块。

6. 使标签左浮动并使用hidden: overflow;技巧通过非浮动块填充所有剩余空间。

请检查结果：

＆＃13;
＆＃13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.header{
  text-align: center;
  border: 2px solid blue;
}
h1.lead {
  margin: 0;
  padding: 12px;
}

.body{
  border: 2px solid blue;
  margin-top: 10px;
  padding-top: 12px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-horizontal .control-label {
  display: block;
  float: left;
  margin-bottom: 0;
  margin-right: 20px;
  padding-top: 7px;
  white-space: nowrap;
}
.form-horizontal .form-control {
  width: 100%;
}
.fill-free-space {
  overflow: hidden;
}
＆＃13;
<div class="header"><h1 class="lead">Test</h1></div>

<div class="body">
  <div class="container">
    <form class="form-horizontal" role="form">
      <div class="row">
      
        <div class="col-md-6">
          <div class="form-group">
            <label for="input_left_1" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_left_1" placeholder="Left">
            </div>
          </div>
          <div class="form-group">
            <label for="input_left_2" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_left_2" placeholder="Left">
            </div>
          </div>
          <div class="form-group">
            <label for="input_left_3" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_left_3" placeholder="Left">
            </div>
          </div>
          <div class="form-group">
            <label for="input_left_4" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_left_4" placeholder="Left">
            </div>
          </div>
          <div class="form-group">
            <label for="input_left_5" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_left_5" placeholder="Left">
            </div>
          </div>
        </div>
        
        <div class="col-md-6">
          <div class="form-group">
            <label for="input_right_1" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_1" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_2" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_2" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_3" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_3" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_4" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_4" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_5" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_5" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_6" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_6" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_7" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_7" placeholder="Right">
            </div>
          </div>
          <div class="form-group">
            <label for="input_right_8" class="control-label">Label</label>
            <div class="fill-free-space">
              <input class="form-control" type="text" id="input_right_8" placeholder="Right">
            </div>
          </div>
        </div>
        
      </div>          
    </form>
  </div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;