響應式設計突破點錯位

我有一個收集用戶個人信息的表單。我已經開始使用引導程序網格將控件添加到表單中。當我達到某個突破點時，我有問題。例如，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之間PX;姓氏字段是格格不入

屏幕爲782px以上

來源

2016-01-22 Jean B

這是因爲你使用了太多的類，如COL-XS-12，您應該ONY嘗試使用一個或太然後如果事情搞砸在CSS中使用@media屏幕進行任何調整 –

我有點困惑。爲什麼要使用這麼多列是一個問題？根據我目前閱讀的內容，我認爲col-xx-xx的要點是當您達到某個中斷點時，處理不同的屏幕大小和控件重新定位。如果應用程序可以用於iPhone，桌面，中型筆記本電腦和/或大型桌面屏幕，爲什麼我不應該使用這4列選項？我對此很新，所以我希望我的問題對你有意義。 –

是的，你已經閱讀正確的，但是，例如，一個col-md-4總是調整到移動設備，嘗試和使用col-xx-xx如果你想重新做一定的屏幕尺寸的佈局，我傾向於總是使用col-md-xx，並且你會發現它在大部分時間都會使用 –

權利，使您的問題有線，我已經渡過了你的代碼升技（不完全，否則你不會學習）表單現在可以響應從大屏幕到手機。

你會看到我只使用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>

來源

2016-01-26 17:11:32

響應式設計突破點錯位

回答

相關問題