Fatal编程技术网
  • html/
  • Html 以窗体堆叠两列与在mobile上合并

Html 以窗体堆叠两列与在mobile上合并

html css bootstrap-4

Html 以窗体堆叠两列与在mobile上合并,html,css,bootstrap-4,Html,Css,Bootstrap 4,目标是使一个表单有两列。在计算机显示器上查看时，会显示两列，但在移动设备上，这些列是堆叠的。我正在使用引导。我预计我将使用一些内联和内联块的组合，但可能需要一些指导 范例表格 <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" co

目标是使一个表单有两列。在计算机显示器上查看时，会显示两列，但在移动设备上，这些列是堆叠的。我正在使用引导。我预计我将使用一些内联和内联块的组合，但可能需要一些指导

范例表格

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Test Form</title>
  </head>
  <style>

    /* ??? */

  </style>
  <body>
  <form action="test.php" method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="form-group col-md-6">
            <h5>Label 1</h5>
            <input type="text" name="value1" class="form-control">
        </div>

        <div class="form-group col-md-6">
            <h5>Label 2</h5>
            <input type="text" name="value2" class="form-control">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <h5>Label 3</h5>
            <input type="text" name="value3" class="form-control">
        </div>

        <div class="form-group col-md-6">
            <h5>Label 4</h5>
            <input type="text" name="value4" class="form-control">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <h5>Label 5</h5>
            <input type="text" name="value5" class="form-control">
        </div>

        <div class="form-group col-md-6">
            <h5>Label 6</h5>
            <input type="text" name="value6" class="form-control">
        </div>
    </div>

    <input type="submit" value="Submit" class="btn btn-primary btn-lg">
    </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


测试表
/* ??? */
标签1
标签2
标签3
标签4
标签5
标签6
试试这个片段

body{margin:10px}
.m2{背景：黄色}
.m1{背景：青色}

标签1
标签2
标签3
标签4
标签5
标签6
试试这个片段

body{margin:10px}
.m2{背景：黄色}
.m1{背景：青色}

标签1
标签2
标签3
标签4
标签5
标签6
实际上，使用CSS网格很容易实现这一点。您需要将桌面页面上的每一列放在一个父div中。 您的HTML应该类似于以下内容：

<div id="container">
    <div class="responsive-column">
        <div class="label">Label 1</div>
        <div class="label">Label 2</div>
        <div class="label">Label 3</div>
    </div>
    <div id="col2" class="responsive-column">
        <div class="label">Label 4</div>
        <div class="label">Label 5</div>
        <div class="label">Label 6</div>
    </div>
</div>
这将只针对纵向移动设备。对于横向方向，此行应包含以下内容

@media (max-width: 50rem)
虽然这根本不使用引导，但它应该满足您的需要。您可能需要考虑IE和旧边缘版本的后退。没有任何类型的回退，旧的Edge和IE会将此表单呈现为移动设备。

实际上，使用CSS网格很容易实现。您需要将桌面页面上的每一列放在一个父div中。 您的HTML应该类似于以下内容：

<div id="container">
    <div class="responsive-column">
        <div class="label">Label 1</div>
        <div class="label">Label 2</div>
        <div class="label">Label 3</div>
    </div>
    <div id="col2" class="responsive-column">
        <div class="label">Label 4</div>
        <div class="label">Label 5</div>
        <div class="label">Label 6</div>
    </div>
</div>
这将只针对纵向移动设备。对于横向方向，此行应包含以下内容

@media (max-width: 50rem)
虽然这根本不使用引导，但它应该满足您的需要。您可能需要考虑IE和旧边缘版本的后退。如果没有任何类型的回退，旧的Edge和IE会将此表单呈现为移动设备。

那么您希望移动设备上有两列？肯定没有足够的水平空间来容纳这个？我想要的是在一个常规大小的屏幕上有两列，但在移动堆栈上有两列。所以你想要移动设备上有两列？当然没有足够的水平空间来容纳这个？我想要的是在一个常规大小的屏幕上有两列，但在移动堆栈上有两列。