Bootstrap 3圍繞圖像纏繞文本

我有一列3保存我的文本，然後是一列9保存我的項目的圖像，如果文本比圖像高度更長我希望文本包裝下圖像，我試圖嵌套列，但沒有成功，我只是將圖像正確地在12列中與文本對齊，但在移動設備上，我希望文本出現在圖像的頂部，默認列行爲。Bootstrap 3圍繞圖像纏繞文本

這裏是我的代碼：

<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

來源

2016-05-19 pocockn

如何如何使用您的圖像作爲縮略圖，周圍環繞文字作爲標題。 http://bootsnipp.com/user/snippets/a37zk – bhansa

我建議複製圖像。我們會將第一個實例放在文本之前。這將是寬屏幕上的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

來源

2016-05-19 21:11:14

如果你把圖像的主柱內浮動是正確的？然後在圖像周圍設置邊距，使其達到所需的間距。

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

然後，對於手機，在某些屏幕分辨率下，您可以將圖像設置爲顯示塊而不是浮動。

來源

2016-05-19 18:06:32 Wellspring

Bootstrap 3圍繞圖像纏繞文本

回答

相關問題