Html 引导：映像将不会右对齐_Html_Twitter Bootstrap 3

Html 引导：映像将不会右对齐

html twitter-bootstrap-3

Html 引导：映像将不会右对齐,html,twitter-bootstrap-3,Html,Twitter Bootstrap 3,我在Codepen上做这个，因为我是Bootstrap新手&对于像我这样的新手来说，这是一个很好的练习站点我试图右对齐右下角的图像，但失败了。根据我自己对此的研究，我不确定是否可以/应该使用“向右拉”。让我困惑的是，左对齐图像的代码工作得很好，那么右对齐图像的代码缺少什么呢 <body>  <div class = "media"> <div class

我在Codepen上做这个，因为我是Bootstrap新手&对于像我这样的新手来说，这是一个很好的练习站点

我试图右对齐右下角的图像，但失败了。根据我自己对此的研究，我不确定是否可以/应该使用“向右拉”。让我困惑的是，左对齐图像的代码工作得很好，那么右对齐图像的代码缺少什么呢

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


游动
放松的好方法

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

现在谈谈你的问题。第一个是你们两个分区的位置不对。如果问题解决了，则向右拉就像一个符咒（如果包含bootstrap.css），但要在每一行中放置我使用的bootstrap类的图像

col-xs-12

。（了解有关网格系统的更多信息）

工作解决方案：

你能链接代码笔吗？请同时发布你的CSS。谢谢你的建议。我试过了，但布局混乱，不是我想要的样子。问题是我对引导网格系统缺乏清晰的理解。我在学习，但我需要更多的实践，把理论应用到编码实践中。我确实把代码笔的结尾改成了一个更容易管理的地方。它并不完美，但作为一个新手，我对它很满意。完成的页面在这里@Achill看起来很棒，只是我这边的建议。尽量缩小窗口大小，并使用网格系统处理第一行（图像、文本、图像）。正确的图像不应该消失在窗外…谢谢。事后看来，不得不将页面的结尾改为缩略图给了我一条宝贵的线索，说明我做错了什么。简单地说，我需要在引导网格中试验大小。更改为意味着4个缩略图适合一行。只是要记住，在我的下一个项目中，这是一个12栏。