Question

我有一列3，其中包含我的文本，然后是一列9，其中包含我的项目的图像，如果文本长于图像高度，我希望文本在图像下包裹，我试过为了嵌套列但没有成功，我只是将图像右侧的12列与文本对齐但在移动设备上我希望文本显示在图像的顶部，具有默认的列行为。

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <h2 class="blue-header"><?php the_title(); ?></h2>
            <p class="first-para"><?php the_content(); ?></p>
        </div>
        <div class="col-md-9">
            <?php $image = get_field('single_project_image', $id ); ?>
            <img src="<?php echo $image[url]; ?>" class="img-responsive margin-image">
        </div>
    </div>
</div>

这是我创建的Bootsnipp的链接：

http://bootsnipp.com/snippets/6n3q5

Answer 1

如果您将图像放在主列中并将其浮动，该怎么办？然后在图像周围设置边距，使其具有您想要的间距。

<div class="container">
<div class="row">
    <div class="col-md-12">
        <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-responsive margin-image pull-right">
        <h2 class="blue-header">Test Project</h2>
        <p class="first-para">Marshmallow donut wafer oat cake chocolate ... snip ....
        </p>
        </div>
    </div>
</div>

然后对于手机，在特定屏幕分辨率下，您可以将图像设置为显示块而不是浮动。

Answer 2

我建议复制图像。我们将在文本之前放置第一个实例。这个将在宽屏幕上float: right;。第二个实例将放在文本之后。它将在狭窄的屏幕上显示。

＆＃13;

.img-clone-1 {
  max-width: 60%;
  margin: 18px 0 18px 18px;
}
.img-clone-2 {
  width: 100%;
  margin: 12px 0;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-magic">
      <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-1 hidden-xs pull-right">
      <h2 class="blue-header">Test Project</h2>
      <p class="first-para">Marshmallow donut wafer oat cake chocolate bar jelly beans dragée. Donut macaroon lollipop. Chocolate cake dragée pastry donut cupcake dragée danish jelly-o.
      Jelly-o marzipan pastry cotton candy pudding halvah pastry pastry. Tart lemon drops bear claw sugar plum wafer. Icing icing gummies donut pie topping toffee muffin.
      Danish macaroon cookie toffee bear claw. Icing cheesecake pie cake pie fruitcake brownie. Gummi bears chocolate bar marshmallow chupa chups.
      Tart pudding tiramisu tootsie roll cake icing chocolate pie. Marshmallow donut cheesecake. Brownie halvah toffee ice cream powder lollipop wafer liquorice.
      Pudding dessert carrot cake pastry oat cake dessert toffee topping cheesecake. Lemon drops jelly-o chupa chups dragée. Pie muffin liquorice tiramisu icing oat cake brownie bear claw. Cake halvah soufflé caramels tiramisu.</p>
      <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-2 visible-xs img-responsive">
    </div>
  </div>
</div>

＆＃13;

http://bootsnipp.com/snippets/qgqdg

Answer 3

将两个元素放入同一列。

使用1行中的2列的示例：<col-md-5>＆amp; <col-md-7>

<小时/> 输出：

使用1行1列的示例：<col-md-12>

img id （可以是任何内容）并为其提供类 alignleft （或对齐，如果你想让它与右边的对齐），然后设置边缘的样式。

以下是我使用的内容：

#member-profile-photo.alignleft {
    float: left;
    margin-right: 2em;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

<小时/> 如果您希望所有内容都在移动视图中居中，请添加单独的媒体查询以删除较小屏幕上的浮动和边距。

Bootstrap 3在图像周围包裹文本

3 个答案: