Question

我有一个收集用户个人信息的表单。我已经开始使用bootstrap网格向表单添加控件。当我达到某个突破点时，我遇到了问题。例如，768和781px，其中一个控件将不合适。然后，它将在782px回落到正常工作。我有3个单独的css文件，但它们目前没有任何内容。如何在768和781px之间进行控制时如何处理？

html文件

  <div class="row">
    <div class="form-group">
       <label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">First Name:</label>
       <div class="col-xs-12 col-sm-4 col-md-4">
          <input type="text" id="FirstName" name="FirstName"  class="form-control"/>
        </div>
        <label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">Middle Name:</label>
        <div class="col-xs-12 col-sm-4 col-md-4">
           <input type="text" class="form-control" name="middleName"  id="middleName" />
         </div>
         <label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Last Name:</label>
         <div class="col-xs-12 col-sm-4 col-md-4">
           <input type="text" class="form-control" name="lastName"  id="lastName" />
          </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"></div>

         <div class="form-group">
            <label for="FirstName" class="col-xs-12 col-sm-2 col-md-2 label-control">Sex:</label>
             <div class="col-xs-12 col-sm-4 col-md-4">
              <select id="Sex" name="Sex" class="form-control">
                  <option>Select Sex</option>
               </select>
             </div>
             <label for="middleName" class="col-xs-12 col-sm-2 col-md-2 label-control">DOB:</label>
               <div class="col-xs-12 col-sm-4 col-md-4">
                 <input type="text" class="form-control" name="DOB"  id="DOB" />
               </div>
               <label for="lastName" class="col-xs-12 col-sm-2 col-md-2 label-control">Race:</label>
               <div class="col-xs-12 col-sm-4 col-md-2">
                 <select id="Race" name="Race" class="form-control">
                    <option>Select Race</option>
                  </select>
               </div>
            </div>
       </div>


@media only screen and (min-device-width:768px) and (max-device-width:1024px){
}
@media only screen and (min-device-width:1024px) {
}

当屏幕小于768px 时

屏幕介于768和781像素之间; lastName字段不合适

屏幕为782px或更高

Answer 1

正确所以你的问题是有线的，我已经把你的代码提升了（不完全没有你不会学习）现在表格从大屏幕响应到手机。

您将看到我只使用col-md-xx来实现您想要的外观。如果你想要一些改变，只需弹出一个评论，并且很高兴为你做这件事

<div class="container">
  <div class="row">
    <div class="form-group">
       <label for="FirstName" class="col-md-2 label-control">First Name:</label>
       <div class="col-md-4">
          <input type="text" id="FirstName" name="FirstName"  class="form-control"/>
        </div>
        <label for="middleName" class="col-md-2 label-control">Middle Name:</label>
        <div class="col-md-4">
           <input type="text" class="form-control" name="middleName"  id="middleName" />
         </div>
         <label for="lastName" class="col-md-2 label-control">Last Name:</label>
         <div class="col-md-4">
           <input type="text" class="form-control" name="lastName"  id="lastName" />
          </div>
      </div>
      <div class="col-md-12"></div>

         <div class="form-group">
            <label for="middleName" class="col-md-2 label-control">DOB:</label>
               <div class="col-md-4">
                 <input type="text" class="form-control" name="DOB"  id="DOB" />
               </div>
            <label for="FirstName" class="col-md-2 label-control">Sex:</label>
             <div class="col-md-4">
              <select id="Sex" name="Sex" class="form-control">
                  <option>Select Sex</option>
               </select>
             </div>
               <label for="lastName" class="col-xs-12 col-md-2 label-control">Race:</label>
               <div class="col-xs-12 col-md-2">
                 <select id="Race" name="Race" class="form-control">
                    <option>Select Race</option>
                  </select>
               </div>
            </div>
       </div>
    </div>

响应式设计突破点搞砸了

1 个答案: