引導形式複製內容

我的頁面結構在桌面上像這樣：引導形式複製內容

<form> 
___________________________________________________ 
|             | 
|         [] checkbox | 
|    <div>TITLE</div>     | 
|   <div>SUBTITLE</div>     | 
|_________________________________________________| 
</form>

在移動設備上我想有這樣的：

<form> 
____________________ 
|     | 
| <div></div> | 
| <div></div> | 
| []checkbox  | 
|__________________| 
</form>

代碼：

<form> 
    <div class="row"> 
     <div class="col-sm-12 text-right visible-lg"> 
      <input type="checkbox"> 
     </div> 
     <div class="col-sm-12 text-center"> 
      TITLE 
     </div> 
     <div class="col-sm-12 text-center"> 
      SUBTITLE 
     </div> 
     <div class="col-sm-12 text-right hidden-lg"> 
      <input type="checkbox"> 
     </div> 
    </div> 
</form>

試圖玩.visible-lg.hidden-lg等，但問題是，複選框是相同的（克隆 - 相同name,id,class）和提交表單時，他們混淆了所有的邏輯。如果第一次我檢查，但第二次沒有，在後我仍然得到它的檢查。

在這種情況下我該怎麼辦？

Checkeboxes都是開關（bootstrapetoggle.com）

來源

2017-02-24 gordon33

如果他們是在同一行，那麼你可以使用推拉類。 –

@AnilTalla在繪圖中，每個新行都是一行。所以它們不在同一行 – gordon33

編寫一個javascript函數來刪除其中一個元素，從onload調用該函數並調整事件大小。 –

使用Flexbox的。您可以設置其中任何元素的順序。在這種情況下，缺省值爲order: 1;（並且通過實際順序解決關係），並且通過將複選框設置爲order: 2;，它將在其他兩個下移。

@media (max-width: 480px) { 
    .row { 
    display: flex; 
    flex-direction: column; 
    } 
    #withcheckbox { 
    order: 2; 
    text-align: center; 
    } 
}

JSFiddle

來源

2017-02-24 15:22:00 amflare

完美的作品！謝謝 – gordon33

保持你的做法，解決了最簡單的方式是封閉字段2種不同的形式，用同樣的動作。喜歡的東西：

<form action="/myaction"> <!-- sm-hidden --> 
[] check 
<div></div> 
<div></div> 
<submit /> 
</form> 

<form action="/myaction"> <!-- lg-hidden --> 
<div></div> 
<div></div> 
[] check 
<submit /> 
</form>

的ID必須是不同的，但你需要在服務器端是名稱屬性，而不是ID

- 編輯 -

，如果你不頭腦使用JavaScript撰寫的頁面，你可以使用HTML模板：

function useTemplate(id) { 
 
    var myTemplate = document.getElementById('myTemplate'), 
 
    normalContent = document.getElementById(id), 
 
    clonedTemplate = myTemplate.content.cloneNode(true); 
 
    normalContent.appendChild(clonedTemplate); 
 
} 
 

 
useTemplate('first-form');useTemplate('second-form');

<!-- Template Content --> 
 
<template id="myTemplate"> 
 
<div><input /></div> 
 
<div><input /></div> 
 
<div><input /></div> 
 
<div><input /></div> 
 
</template> 
 

 
<!-- Normal Content --> 
 
<form> 
 
<fieldset> 
 
<input type='checkbox'/> 
 
<div id="first-form"> 
 
</div> 
 
</fieldset> 
 
</form> 
 

 
<form> 
 
<fieldset> 
 
<div id="second-form"> 
 
</div> 
 
<input type='checkbox'/> 
 
</fieldset> 
 
</form>

來源

2017-02-24 15:11:54 ciko

這就是問題所在，表單非常大，這只是表單的最高層。所以複製表單在這一點上並不擅長。順便說一句，謝謝 – gordon33

- 編輯 - 如果你不介意通過JavaScript創建的形式，你可以做一些像 – ciko

這樣做this--

<html> 
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
     <style type="text/css"></style> 
 
    </head> 
 
    <body> 
 
     <form> 
 
      <div class="row"> 
 
       <div class="col-sm-8 col-md-8 col-lg-8 col-xs-8"> 
 
        <div class="row"> 
 
         <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12"> 
 
          --------- 
 
         </div> 
 
         <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12"> 
 
          +++++++++ 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12"> 
 
        checkbox[] 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </body> 
 
    </html>

來源

2017-02-24 15:13:22 neophyte

片段謝謝，但所有文本的div應該是'.text-center'和複選框不應該在同一行。 – gordon33

在代碼片段中檢查複選框與其他兩個元素不在同一行中，而是將所有三個元素都包裝在外部行中。你可以很容易地使用.text-center的元素 – neophyte

引導形式複製內容

回答

相關問題