Bootstrap 3 div display block

Question

想要构建这样的东西：http://s29.postimg.org/n2me4y65z/img.png

<div class="row">
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
...
</div>
<img src="test.png" class="img-responsive"/>
</div>
</div>

第1期使div 2保持在div 1下方。(显示：块不起作用)

第2期使图像始终保持在右侧。(然后消失的"隐藏xs")

如果有人能够提供帮助；/

Answer 1

您不需要全宽的外部div，Bootstrap会自动采用12列布局。只需确保用一个类"container"将所有内容封装在div中即可。可以使用浮动设置定位。

<div class="container">
<div class="row">                          
<div id="div1" class="col-md-8" style="{float:left;}">
Div 1 Text
</div>
<div id="div2" class="col-md-4" style="{float:right;}">
<img src="test.png" class="img-responsive"/>
</div>
<div id="div3" class="col-md-8" style="{float:left;}">
Div 2 Text
</div>
</div>
</div>

Answer 2

<div class="row">
<div class="col-md-8">
<div>Div 1 text</div>
<div>Div 2 text</div>
</div>
<div class="col-md-4">
<img src="test.png" class="img-responsive"/>
</div>
</div>

如果你需要在小分辨率设备上隐藏滚动，请将引导程序的词缀或响应助手添加到你的图像中。

Answer 3

如果适合您的情况，使用Media对象或Media列表怎么样？

<div class="media">
<a class="pull-right" href="#">
<img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
Aliquam in felis sit amet augue.
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
Aliquam in felis sit amet augue.
</div>
</div>

引导程序3-介质对象

您可以在此处试用此示例：http://bootply.com/101967