Question

我在桌面上有这样的页面结构：

<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）

Answer 1

使用flexbox。您可以设置其中任何元素的顺序。在这种情况下，默认值为order: 1;（关系是按实际顺序解决的），通过将复选框设置为order: 2;，它会在其他两个位置下移。

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

JSFiddle

Answer 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需要不同，但服务器端需要的只是name属性，而不是id

- 编辑 -

如果您不介意使用javascript撰写页面，可以使用html模板：

＆＃13;

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');

＆＃13;

<!-- 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>

＆＃13;

Answer 3

做这样的事情 -

＆＃13;

<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>

＆＃13;

bootstrap形式重复的内容

3 个答案: