Question

我需要Bootstrap Grid系统的帮助（col-md，col-sm，col-lg等）当屏幕分辨率较小时，我的网格会不断变形。所有这些分辨率都来自台式机和笔记本电脑，没有平板电脑/手机。

我知道col-sm的分辨率高达750px，而col-d高达970px。不应该涵盖测试的分辨率吗？

以下是示例。

决议：1280x1024 一切看起来都应该如此。

1280x1024

分辨率：1024x600 标签和输入未对齐且失真。

与内联方法

相同

HTML：

    <div class="panel-group">
<div class="panel">  
    <div class="panel-body">        
        <div class="row col-sm-12 col-md-12">               
            <div class="col-sm-3 col-md-3 verticalline">                            
                <div class="form-group">
                    <label class="col-sm-4 col-md-4 control-label">
                        Cust PO #
                    </label>
                    <div class="col-sm-8 col-md-8">
                        <input type="text" class="form-control textlabellook" id="custpotxt" name="custpotxt" value=""/>                            
                    </div>
                </div>                          
                <div class="form-group">
                    <div class="col-sm-12 col-md-12">
                        <p class="middle"><b>Customer License Contact Info</b></p>
                    </div>
                </div>   
                <div class="form-group">
                    <label class="col-xs-4 col-sm-4 col-md-4 control-label">
                        Cust Name
                    </label>
                    <div class="col-xs-8 col-sm-8 col-md-8">
                         <p class="form-control-static"><input type="text" class="form-control textlabellook" id="suppnametxt" name="suppnametxt" placeholder="Name..." value="" /></p>
                    </div>
                </div> 
                <div class="form-group">
                    <label class="col-xs-4 col-sm-5 col-md-5 control-label">
                         Cust Phone #
                    </label>
                    <div class="col-xs-7 col-sm-7 col-md-7">
                         <p class="form-control-static"><input type="text" class="form-control textlabellook" id="suppphonetxt" placeholder="Phone #..." name="suppphonetxt" value="" onkeypress="return numbersonly(event, false)"/></p>
                    </div>
                </div> 
                <div class="form-group">
                    <label class="col-xs-4 col-sm-4 col-md-4 control-label">
                         Cust Email
                    </label>
                    <div class="col-xs-8 col-sm-8 col-md-8">
                         <p class="form-control-static"><input type="text" class="form-control textlabellook email" id="suppemailtxt" name="suppemailtxt" placeholder="Email..." value="" /></p>
                    </div>
                </div> 
            </div               
            <div class="col-sm-3 col-md-3 verticalline">
                <!-- stuff in here -->
            </div>                               
            <div class="col-sm-3 col-md-3 verticalline"> 
                <!-- stuff in here -->                                             
            </div>                  
            <div class="col-sm-3 col-md-3">  
                <!-- stuff in here -->
            </div>              
        </div> 
    </div>
</div>

Tested with Inline method provided by vanburenx

Answer 1

您将columns和rows混合在一起，列位于rows内。并且您不需要那些基本上重复的列。请参阅docs和示例。

<强>更新

您可以嵌套列/行，以便在屏幕上排列所有输入/显示项目。见Nesting Forms

我有两个版本：一个带内联标签，另一个没有。

请参阅下面的工作示例。

/**FORM 1 INLINE LABEL**/

#theForm,
#theForm2 {
  font-size: 11px;
  font-weight: bold;
  color: #266080;
}
.no-gutter >[class*='col-'] {
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 0;
  margin-bottom: 0;
}
.middle {
  margin-top: 10px;
  margin-bottom: 10px;
}
.black {
  border-bottom: 6px solid black;
}
@media (max-width: 768px) {
  .red {
    border-bottom: 6px solid red;
    margin: 10px 0;
  }
}
/**FORM 2 BLOCK LABEL**/

.no-gutter2 >[class*='col-'] {
  padding-right: 15px;
  padding-left: 15px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.middle {
  margin-top: 10px;
  margin-bottom: 10px;
}
.blue {
  border-bottom: 3px solid lightblue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<form id="theForm">
  <div class="container">
    <h2>Inline Label Nested Form</h2>
    <div class="row black">
      <!-- START CONTAINER-->
      <div class="col-sm-3">
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <p class="middle text-center"><b>Customer License Contact Info</b> 
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
      </div>
      <!-- END CONTAINER-->
      <div class="red"></div>
      <!-- START CONTAINER-->
      <div class="col-sm-3">
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #2</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <p class="middle text-center"><b>Customer License Contact Info</b> 
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
      </div>
      <!-- END CONTAINER-->
      <div class="red"></div>
      <!-- START CONTAINER-->
      <div class="col-sm-3">
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #3</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <p class="middle text-center"><b>Customer License Contact Info</b> 
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
      </div>
      <!-- END CONTAINER-->
      <div class="red"></div>
      <!-- START CONTAINER-->
      <div class="col-sm-3">
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #4</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="form-group">
              <p class="middle text-center"><b>Customer License Contact Info</b> 
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <div class="form-group">
              <label class="control-label">Cust PO #</label>
            </div>
          </div>
          <div class="col-xs-8">
            <div class="form-group">
              <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
            </div>
          </div>
        </div>
      </div>
      <!-- END CONTAINER-->
    </div>
  </div>
</form>
<hr>
<form id="theForm2">
  <div class="container-fluid">
    <h2>Block Label Nested Form</h2>
    <div class="row">
      <div class="col-sm-3">
        <div class="row no-gutter2 blue">
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Customer License Contact Info</b> 
            </p>
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Attach POs to Order</b> 
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="row no-gutter2 blue">
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Customer License Contact Info</b> 
            </p>
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Attach POs to Order</b> 
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="row no-gutter2 blue">
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Customer License Contact Info</b> 
            </p>
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Attach POs to Order</b> 
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="row no-gutter2 blue">
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Customer License Contact Info</b> 
            </p>
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <label class="control-label">Cust PO #</label>
          </div>
          <div class="col-xs-12">
            <input type="text" class="form-control textlabellook" name="custpotxt" value="" />
          </div>
          <div class="col-xs-12">
            <p class="middle"><b>Attach POs to Order</b> 
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 2

我认为这是违规行。

class="col-xs-4 col-sm-5 col-md-5 control-label"

也许尝试将其设置为：

class="col-xs-5 col-sm-5 col-md-5 control-label"

看看是否有帮助...

它是唯一一个偏离其他人的人。 Bootstrap首先是移动的，因此它的设计使它的类从最小的开始工作。所以，如果你设置：

  class="col-xs-8 col-sm-8 col-md-8">

与将其设置为：

相同

 class="col-xs-8">

除非您要更改较大的布局，否则只会是最小的布局，并且它们都会向上继承。

Answer 3

对行使用以下内联css。这将有助于扭曲的列重新分配对方。

<div class="row" style="display:flex; flex-wrap:wrap;">
...
</div>

希望这有帮助。

Bootstrap 3网格系统失真

3 个答案: