Javascript 引导：在调整大小时将一个div移动到另一个div下？_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导：在调整大小时将一个div移动到另一个div下？

javascript jquery html css twitter-bootstrap

Javascript 引导：在调整大小时将一个div移动到另一个div下？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我遇到了一个问题，我知道解决方案应该非常简单，但到目前为止，我似乎找不到实现这种特定行为的正确方法，基本上我正在尝试将一个图像移动到另一个div的顶部，该div包含一些关于页面大小调整的信息，我必须使用bootstrap。我已经尝试添加网格系统，比如col-md-6或col-md-12，但是没有任何东西能像我所希望的那样工作这是我的钱包有人能帮我吗？提前谢谢 XYZ var新闻=[]； $（文档）.ready（函数（）{ $.ajax({ url:'getNewsPage.json'， a

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

这是我的钱包有人能帮我吗？提前谢谢


XYZ
var新闻=[]；
$（文档）.ready（函数（）{
$.ajax({
url:'getNewsPage.json'，
async:false，
数据类型：“json”，
成功：功能（数据）{
var stringLayoutOne=“”；
stringLayoutOne+=“”+数据.新闻[0]。标题+“”+数据.新闻[0]。正文+“”；
var stringLayoutTwo=“”+数据.新闻[0].标题+“”+数据.新闻[0].正文+“”；
var stringLayoutFour=“”+数据.新闻[0].标题+“”+数据.新闻[0].正文+“”；
var stringLayoutThree=“”+数据.新闻[0].标题+“”+数据.新闻[0].正文+“”；
$（“#newsLayoutOne”）.html（stringLayoutOne）；
//$（“#newsLayoutTwo”）.html（stringLayoutTwo）；
//$（“#newsLayoutThree”）.html（StringLayouttree）；
//$（“#newsLayoutFour”）.html（stringLayoutFour）；
},
错误：函数（数据）{
控制台日志（数据）；
}
});
});
帕吉纳新闻

尝试在其周围添加“.row”div


...
...

大概是这样的：

<body>
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="jumbotron">
                    <h1>Pagina news</h1>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="span3">
                    <div class="container" id="newsLayoutOne">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutTwo">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutThree">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutFour">
                    </div>&nbsp
                </div>
            </div>
        </div>
    </body>


帕吉纳新闻

我认为这已经实现了您想要的：

我将您的StringLayouton代码替换为以下代码：

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

stringLayoutOne+=“”+数据.新闻[0].标题+“”+数据.新闻[0].正文+“”；

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

我还将顶部的jumbotron放在一行中，与其在一个页面中使用多个容器，不如使用一个容器和多行

一般来说，最好尝试只使用引导来管理布局，除非您完全没有其他选择，并且只使用您自己的样式进行外观更改（字体大小、颜色、边框等）。

您通常应该有一个容器。在内部添加一行。在内部添加列

Container div
   Row div
       Image div: col-sm-12, col-md-4
       Content div: col-sm-12, col-md-8

比如说，你有一行有两列，图像和内容。诀窍是将多个屏幕大小相关的列类分配给同一列。在这种情况下，在调整大小的过程中，它将选择相应的类，并将回流divs，以便在一个可视行中不超过12个网格列

Container div
   Row div
       Image div: col-sm-12, col-md-4
       Content div: col-sm-12, col-md-8

这可能是你想要的。@D_Supreme我已经尝试添加网格系统，如col-md-12或col-md-6，但到目前为止还无法创建小提琴。对于网格系统的实现？@D_Supreme我已经发布了一个plunkerHe正在使用Bootstrap v3。请发布解决方案，而不是v2。

Container div
   Row div
       Image div: col-sm-12, col-md-4
       Content div: col-sm-12, col-md-8