Question

我想问一下如何在桌面模式下从<div>制作class="col-6"并在移动视图中将其设为完整列col-12？

对于我的第一个，虽然我试着做到这样：

<div class="container">
    <div class="row">
        <div class="col-6 col-xs-12">
            Content goes here...
        </div>
    </div>
</div>

当我去Inspect > Mobile View时，我认为它会使它成为完整列，但事实并非如此。

所以我有第二个选择，那就是：

<div class="container">
    <div class="row">

        <!-- Content on Desktop -->
        <div class="col-6 hidden-mobile">
            Content goes here...
        </div>

        <!-- Content on Mobile -->
        <div class="col-12 hidden-desktop">
            Content goes here...
        </div>

    </div>
</div>

有没有可能的方法来制作没有重复的2内容div？

Answer 1

你尝试过吗？你可以使用新的＆＃34;小＆＃34;网格类（col-sm- *），以防止布局在较小的显示器上堆叠。

 <div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-3">
                 Content goes here...
            </div>
            <div class="col-lg-9 col-sm-9">

                <div class="col-lg-6 col-sm-6">
                      Content goes here...
                </div>

                <div class="col-lg-6 col-sm-6">
                      Content goes here...
                </div>

            </div>
        </div>
    </div>

点击此处demo 如果您希望它永远不会堆叠，即使在最小的显示器上，也可以使用微小的col-xs- *网格类

Answer 2

首先，您应该提供bootstrap样式表的链接。其次你也需要使用col-md-6。

<html>
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="setest_style.css">
  <!-- Site CSS -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <h1>HELLO WORLD</h1>
        </div>
    </div>
</div>
</body>
</html>

Answer 3

你使用Bootstrap 4来做这件事吗？

在Bootstrap 4中-xs infix从这些类中删除。访问https://getbootstrap.com/docs/4.0/migration/#global-changes

Bootstrap 4首先是移动设备，因此您应该按照以下方式进行操作

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            Content goes here...
        </div>
    </div>
</div>

响应时列更改 - Bootstrap 4

3 个答案: