Question

我正在尝试将图像浮动在左侧包含文本的列周围的不同列中。我希望通过bootstrap（无论如何都实现）有解决方案。

<div class="row">
    <div class="col-md-8">
        <div class="new"></div>
        <h1>TITLE</h1>                 
        CONTENT
    </div>
    <div class="col-md-4">
    IMAGE
    </div>
</div>

由于图像数量不断变化，文本与图像col的高度相同，导致图片没有环绕文本。在此先感谢，也许我需要另一杯咖啡......

编辑：

+------------+  +----+                      +------------+    +----+
|            |  |    |                      |            |    |    |
|            |  |    |                      |            |    |    |
|            |  +----+                      |            |    +----+
|            |                              |            |
|            |  +----+                      |            |    +----+
|            |  |    |                      |            |    |    |
+------------+  |    |                      +------------+    |    |
                +----+                                        +----+
                                            +----+ +----+  +----+
                                            |    | |    |  |    |
                +----+                      |    | |    |  |    |
                |    |                      +----+ +----+  +----+
                |    |
                +----+                      +----+ +----+ +----+
                                            |    | |    | |    |
                                            |    | |    | |    |
                +----+                      +----+ +----+ +----+
                |    |
                |    |
                +----+

                +----+
                |    |
                |    |
                +----+

                +----+
                |    |
                |    |
                +----+

我希望这有助于我去的地方，小块是想要包裹文本/内容的图像，这是大块。左边是当前状态，右边是我想要实现的状态，所有都是响应。是否有一种方法可以使用bootstrap来限制大盒子的高度，甚至将它放在同一行中？

Answer 1

如果您将所有图片放在单个<div class="col-md-4">中，那么为什么......它是单独的列。使用div的多个版本，每个图像一个。然后他们应该换行。

因此，您的结构必须是：

<div class="row">
    <div class="col-md-8">
        <div class="new"></div>
        <h1>TITLE</h1>                 
        CONTENT
    </div>
    <div class="col-md-4">
    IMAGE
    </div>
    <div class="col-md-4">
    IMAGE
    </div>    
     <div class="col-md-4">
    IMAGE
    </div>    
     <div class="col-md-4">
    IMAGE
    </div>    
    <div class="col-md-4">
    IMAGE
    </div>
</div>

然后它工作正常。

Codepen Demo

＆＃13;

img {
  max-width: 100%;
  margin-bottom: 1em;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="new"></div>
      <h1>TITLE</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam voluptatem laborum rerum amet rem, itaque eaque nesciunt distinctio adipisci possimus repudiandae, cum assumenda fugit ab. Nulla omnis eos facere, quisquam dolor officia possimus odit
        quaerat nemo ad error veritatis voluptate, deserunt ex corrupti aspernatur. Nulla, iure, iste! Exercitationem, architecto. Dolor.</p>
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
    <div class="col-xs-4">
      <img src="http://www.fillmurray.com/460/300" alt="" />
    </div>
  </div>
</div>

＆＃13;

列/文本周围的Bootstrap浮动图像

1 个答案: