html - Bootstrap 3底部垂直对齐图像并链接右 zipper 接

Question

我希望有人能帮我解决这个 Bootstrap 问题，因为我很困惑。

有人要求我在底部垂直对齐图像和其中包含图像的链接。

我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right，这会杀死大部分垂直对齐类，因为它们依赖于 float:none，向右拉需要 float:right

到目前为止，这是我的代码:

<div class="container"> <!-- start of container -->

  <!-- Left side sub-navbar goes here (not important) -->

  <div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->

    <div class="row"> <!-- start of outer-most row -->

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">  

        <div class="row"> <!-- start of title row -->
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
             <hr class="tall">
          </div>
        </div> <!-- end of title row -->

        <div class="row"> <!-- start of image/link row -->

          <!-- left image -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
          </div>

          <!-- link/image combo -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
            <a href="/" target="_blank">
              <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
            </a>
          </div>         

        </div> <!-- end of image/link row -->

      </div> <!-- end of outer-most row -->

    </div> <!-- end of section -->


</div> <!-- end of container -->

这是我为那些喜欢漂亮图片的人制作的 BootPly:http://www.bootply.com/eiEPXErfJx

附言抱歉，如果我的 Bootstrap 代码因额外的 row 和 col-* 而变得臃肿，我仍在学习中。

虽然我接受了这个答案，但它在移动设备上并不完美。到目前为止，我发现的最佳解决方法是更改​​左侧图像和链接/图像组合 div 上的 col-* 类，如下所示:

<!-- left image -->
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
    <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
</div>

<!-- link/image combo -->
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
    <a href="/" target="_blank">
        <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
    </a>
</div>  

这将强制按钮彼此相邻，即使在移动设备上也是如此，以确保按钮不会覆盖左侧图像并隐藏其底部

最新代码:

<div class="container"> <!-- start of container -->

  <!-- Left side sub-navbar goes here (not important) -->

  <div class="col-xs-12 col-md-9 col-md-offset-1"> <!-- start of section -->

    <div class="row"> <!-- start of outer-most row -->

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">  

        <div class="row"> <!-- start of title row -->
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h1 style="margin-bottom:5px;"><strong>TITLE GOES HERE</strong></h1>
             <hr class="tall">
          </div>
        </div> <!-- end of title row -->

        <div class="row"> <!-- start of image/link row -->

          <!-- left image -->
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <img class="img-responsive" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
          </div>

          <!-- link/image combo -->
          <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 bottom-align-text">
            <a href="/" target="_blank">
              <img class="img-responsive" src="http://teamhalprin.com/portfolio/wp-content/uploads/2014/07/Hummer-logo-350x48.png">
            </a>
          </div>         

        </div> <!-- end of image/link row -->

      </div> <!-- end of outer-most row -->

    </div> <!-- end of section -->


</div> <!-- end of container -->

Answer 1

向包含应与底部对齐的上下文的 div 行添加一个类:

.row {
      position: relative;
  }

 .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }

html:

<div class="row .... bottom-align-text" ..>

http://www.bootply.com/EbPZrjAw5w

另请阅读:https://stackoverflow.com/a/24539629/1165509