javascript - Bootstrap : Move a div under another div on resize?-6ren

javascript - Bootstrap : Move a div under another div on resize?

转载作者：行者123 更新时间：2023-11-28 16:58:12

我遇到了一个问题，我知道解决方案应该非常简单，但到目前为止我似乎无法找到实现此特定行为的正确方法，基本上我正在尝试将图像移动到另一个 div 的顶部包含一些关于页面调整大小的信息，我必须使用 Bootstrap 。我已经尝试添加网格系统，例如 col-md-6 或 col-md 12，但没有任何效果如我所愿。

这是我的 Plunker，有人可以帮我吗？提前致谢!

PLUNKER

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>XYZ</title>
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script>
            var news = [];

            $(document).ready(function(){

                $.ajax({
                    url: 'getNewsPage.json',
                    async: false,
                    dataType: 'json',
                    success: function (data){
                        var stringLayoutOne="";
                        stringLayoutOne += "<div class='media'><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";
                        var stringLayoutTwo = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div></div>";
                        var stringLayoutFour = "<div class='media'><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";
                        var stringLayoutThree = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";

                        $("#newsLayoutOne").html(stringLayoutOne);
                        //$("#newsLayoutTwo").html(stringLayoutTwo);
                        //$("#newsLayoutThree").html(stringLayoutThree);
                        //$("#newsLayoutFour").html(stringLayoutFour);
                    },
                    error: function(data){
                        console.log(data);
                    }
                });

            });


        </script>
    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>Pagina news</h1>
            </div>
        </div>

        <div class="container" id="newsLayoutOne">
        </div>&nbsp

        <div class="container" id="newsLayoutTwo">
        </div>&nbsp

        <div class="container" id="newsLayoutThree">
            </div>&nbsp

            <div class="container" id="newsLayoutFour">
            </div>&nbsp

        </body>

    </html>

最佳答案

我认为这已经达到了您的要求:

Plunker Link

我用以下代码替换了您的 stringLayoutOne 代码:

stringLayoutOne += "<div class='row'><div class='col-md-5 col-sm-12'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='col-md-7 col-sm-12'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";

在 HTML 中分解为:

<div class='row'>
  <div class='col-md-5 col-sm-12'>
    <img style='width: 300px; border: 1px solid' class='media-object' src='Your Image'>
  </div>
  <div style='border: 1px solid' class='col-md-7 col-sm-12'>
    <h2 class='media-heading' style='border: 1px solid'><!--data.news[0].title --></h2>
    <!-- data.news[0].body -->
  </div>
</div>

我还将您的顶部超大屏幕排成一排，与其在一个页面上使用多个容器，不如让一个容器和多行。

一般来说，除非您绝对没有其他选择，否则最好尝试只使用 bootstrap 来管理您的布局，并且仅使用您自己的样式进行外观更改(字体大小、颜色、边框等)。

关于javascript - Bootstrap : Move a div under another div on resize?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31741575/

文章推荐： CSS - 将 flex 容器的子容器与屏幕中心对齐无法正常工作

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap : Move a div under another div on resize?