将Bootstrap内容与缩略图中图像的右侧对齐 [英] Align Bootstrap content to the right of an image within a thumbnail

问题描述

我无法在自举缩略图中将标题与图片右侧对齐

I am having trouble aligning my caption to the right of my image within a bootstrap thumbnail

我的HTML

  <div class="container">
   <div class="row">
    <div class="span8 offset2">
     <% @response.each do |f| %>
     <% f.each_pair do |k, v| %>
     <h3 class="smallTitle">Available on&nbsp;<%= k %></h2>
      <% v.each do |film| %>

     <div class="thumbnail">
      <img src="http://placehold.it/180x200">
       <div class="caption">
        <%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
       </div>
      </div>
     <% end %>
    <% end %>
   <% end %>
  </div>
 </div><!--Row-->
</div><!--/container-->

因此，此刻我的图片在图片的左侧，标题在图片的下方..css是否有一种简单的方法来使标题转到div以位于图片的右侧

So at the moment my image is to the left and the caption is below the image.. Is there a simple way with css to get the caption to div to sit to the right of the image

推荐答案

您只需将图像和标题浮动在缩略图div中

You could just float the image and caption within the thumbnail div

 <div class="thumbnail clearfix">
  <img src="http://placehold.it/180x200" class="pull-left">
   <div class="caption" class="pull-right">
    <%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
   </div>
  </div>

这篇关于将Bootstrap内容与缩略图中图像的右侧对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！