如何刪除引導中的重複表單元素

Question

我有2個輸入字段應該在移動設備上彼此相鄰顯示。在移動設備上，它將逐行顯示（每行都包含行類）。我目前的代碼在下面，表單被複制。有沒有辦法消除重複？

<form... class="hidden-xs"> 
    <div class="row"> 
    <div class="col-sm-6 col-md-6 col-lg-6"> 
     <input type="text" name="field1"> 
    </div> 
    <div class="col-sm-6 col-md-6 col-lg-6"> 
     <input type="text" name="field2"> 
    </div> 
    </div> 
</form> 

<form... class="hidden-sm hidden-md hidden-lg"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <input type="text" name="field1"> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <input type="text" name="field2"> 
    </div> 
    </div> 
</form> 

Answer 1

你可以把它簡化爲下面的代碼，它做同樣的任務，因爲在這個JSfiddle

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> 
 
<form> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12"> 
 
     <input type="text" name="field1"> 
 
    </div> 
 
    <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12"> 
 
     <input type="text" name="field2"> 
 
    </div> 
 
    </div> 
 
</form>