Html Bootstrap 3 div 显示块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20725522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 div display block
提问by NaDa
Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png
想要构建这样的东西：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>
issue 1 Cause the div2 stay below the div 1. (display: block does not work)
问题 1 导致 div2 保持在 div 1 下方。（显示：块不起作用）
issue 2 Make the image always stay on the right side. (then disappearing "hidden-xs")
问题 2 使图像始终保持在右侧。（然后消失“hidden-xs”）
If someone is able to help ;/
如果有人能够提供帮助；/
回答by Dmitry Astrikov
<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>
Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.
如果您需要将引导程序的词缀或响应式助手添加到您的图像中，如果您需要将其固定在小分辨率设备上的隐藏滚动上。
回答by tkymtk
How about using Media object or Media list if it fits your case?
如果适合您的情况，如何使用媒体对象或媒体列表？
<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>
You can play around with this sample here: http://bootply.com/101967
您可以在此处使用此示例：http: //bootply.com/101967
回答by anyaelise
You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.
您不需要全宽的外部 div，Bootstrap 会自动假定为 12 列布局。只要确保您将所有内容都包含在具有“容器”类的 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>
