這個Bootstrap響應式佈局是否需要兩個單獨的網格？

Question

我希望我的登錄頁面，看起來像這樣的XS/SM視口：

label1  
[input1]  

label2 
[input2] 

這對於MD/LG視口：

label1  label2 
[input1]  [input2] 

但是我的解決方案需要爲每個

獨立電網

<div class="container-fluid"> 
     <!-- small screens --> 
     <div class="visible-xs visible-sm"> 
      <div class="row"> 
        <div class="col-xs-12"> 
         <label for="username">username</label> 
        </div> 

        <div class="col-xs-12"> 
         <input type="text" name="username" /> 
        </div> 
      </div> 

      <div class="row"> 
        <div class="col-xs-12"> 
         <label for="password">password</label> 
        </div> 

        <div class="col-xs-12"> 
         <input type="text" name="password" /> 
        </div> 
      </div> 
     </div> 


     <!-- large screens --> 
     <div class="visible-md visible-lg"> 
      <div class="row"> 
        <div class="col-md-2"> 
         <label for="username">username</label> 
        </div> 

        <div class="col-md-1"></div> 

        <div class="col-md-2"> 
         <label for="password">password</label> 
        </div> 

        <div class="col-md-7"></div> 
      </div> 

      <div class="row"> 
        <div class="col-md-2"> 
         <input type="text" name="username" /> 
        </div> 

        <div class="col-md-1"></div> 

        <div class="col-md-2"> 
         <input type="text" name="password" /> 
        </div> 

        <div class="col-md-7"></div> 
      </div> 
     </div> 
</div> 

一個網格可以做到這一點嗎？此外，如何以及爲什麼我會在此佈局中使用form-group？

Answer 1

我認爲你應該使用這個代碼來擺脫這個問題

<div class="container-fluid"> 
     <!-- For all screens --> 
     <div class="visible-lg visible-md visible-xs visible-sm"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
      <div class="col-lg-6 col-md-6"> 
       <div class="col-sm-12 col-xs-12"> 
       <label for="username">username</label> 
       </div> 
       <div class="col-sm-12 col-xs-12"> 
       <input type="text" name="username" /> 
       </div> 
      </div> 
      <div class="col-lg-6 col-md-6"> 
       <div class="col-sm-12 col-xs-12"> 
       <label for="password">Password</label> 
       </div> 
       <div class="col-sm-12 col-xs-12"> 
       <input type="text" name="Password" /> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

而且.form-group需要的最佳間距的..