Question

我在Codepen上工作，因为我是Bootstrap＆amp;的新手。对于像我这样的新手来说，这是一个很好的练习场所。

我正试图在右下角右对齐图像但是失败了。根据我自己对此的研究，我不确定是否可以（？）使用“右拉”。让我感到困惑的是，左对齐图像的代码工作得很好，那么我在右对齐图像的代码中缺少什么？

 <body>
<!--
This section sets the left top image
-->
<div class = "media">
   <div class = "media-left">
    <img src="//c1.staticflickr.com/6/5191/7094248657_1cde1542b4_z.jpg" class="media-object" style="width:250px">
  </div>

  <!--
This section contains the heading & any additional text added
-->
  <div class = "media-body">
    <div class = "heading">
      <h2 class = "media-heading">SWIMMING</h2></div>
    <p>A great way to unwind.</p>
  </div>

  <!--
This section contains the top right image
-->
  <div class = "media-right">
    <img src="//c1.staticflickr.com/6/5560/31273130652_169a8d4eae_k.jpg" class="media-object" style="width:250px">
  </div>

  <br>
  <br>

 <!--
This section contains the centre image
-->
  <div class = "bikini">
  <div class="row-fluid">
   <div class="span12 bikini">

      <img class = "center-block img-responsive" src="http://c1.staticflickr.com/6/5090/5283880278_506cd08780_b.jpg" style="width:300px"> </div>
      </div>   
</div>
  </div>
<br>
  <br>

  <!--
This section contains the lower left image
-->
  <div class = "media">
   <div class = "media-left">
    <img class="media-object pull-left" src="//c1.staticflickr.com/7/6224/6345332948_ccd0793d3c_b.jpg" class="media-object" style="width:250px">
  </div>
  </div>

  <!--
This section contains the lower right image
-->
 <div class = "media">
   <div class = "media-right">
     <img class = "media-object pull-right" src="//c1.staticflickr.com/4/3152/2349904544_b8534c5b4e_b.jpg" class="media-object" style="width:250px">

  </div>
  </div> 


      </body>

Answer 1

首先，请为您的代码格式化！它使它更具可读性，我们可以更快地帮助您解决问题。

现在你的问题。第一个是你错误地放置了两个div。如果解决了这个问题pull-right就像一个魅力（如果包含bootstrap.css），但是为了在每一行中放置我使用引导类col-xs-12的图像。（阅读有关网格系统here）

的更多信息

工作解决方案：jsfiddle

Bootstrap：图像不能正确对齐

1 个答案: