Question

我使用的是Bootstrap 4 Alpha。

我希望在窗口变小时在left1之后移动我的right1列，但是当我在小屏幕上刷新页面时，＃left1文本正在添加到屏幕上，如下所示。

我无法理解为什么会发生这样的事情。

这是我当前的页面。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="nav.css">
    <link rel="stylesheet" href="feed.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 col-md-2" id="left1">
                <div class="col-md-12">PROFILE</div>
                <div class="col-md-12" id="menu">MENU</div>
            </div>
            <div class="col-sm-9 col-md-7">NEWS</div>
            <div class="col-sm-3 col-md-3" id="right1">RIGHT PART</div>
        </div>
    </div>

    <script src="jquery.js"></script>
    <script src="holder.js"></script>
    <script src="tether.min.js"></script>
    <script src="bootstrap.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            if($(window).width() < 768){
                $("#right1").after("#left1");
            }
        });
    </script>
</body>
</html>

Answer 1

我想在left1

之后移动我的right1列

我想你想这样做：

$("#right1").after($("#left1"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3 col-md-2" id="left1">LEFT PART
  <div class="col-md-12">PROFILE</div>
  <div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7">NEWS</div>
<div class="col-sm-3 col-md-3" id="right1">RIGHT PART</div>

使用after（）时，jQuery id名称被添加到文档中

1 个答案: