引导形式复制内容

我的页面结构在桌面上像这样：引导形式复制内容

<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

引导形式复制内容

回答

相关问题