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 导致div2保持在div 1之下。（显示：块不起作用）

问题2 使图像始终保持在右侧。（然后消失“hidden-xs”）

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

Answer 1

<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 2

如果适合您的情况，如何使用媒体对象或媒体列表？

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

Bootstrap3 - Media object

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

Answer 3

您不需要具有全宽的外部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>

Bootstrap 3 div显示块

3 个答案: