Bootstrap 3 在图像周围环绕文本答案

【问题标题】：Bootstrap 3 wrap text around imageBootstrap 3 在图像周围环绕文本
【发布时间】：2018-03-19 08:05:59
【问题描述】：

我有一列 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

【问题讨论】：

如何使用您的图像作为缩略图并将文本环绕作为标题。 bootsnipp.com/user/snippets/a37zk

标签： html css twitter-bootstrap

【解决方案1】：

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

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

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

http://bootsnipp.com/snippets/qgqdg

【讨论】：

【解决方案2】：

如果您将图像放在主列中并使其正确浮动怎么办？然后设置图像周围的边距以提供所需的间距。

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

那么对于手机来说，在一定的屏幕分辨率下，你可以将图像设置为显示块而不是浮动。

【讨论】：

【解决方案3】：

将两个元素放入同一列。

在 1 行中使用 2 列的示例：<col-md-5> & <col-md-7>

输出：

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

给 img 一个 id（可以是任何东西）并给它一个 class alignleft ( 或 alignright，如果您希望它向右对齐），然后设置边距以适应口味。

这是我使用的：

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

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

【讨论】：