Bootstrap 3 bottom vertically align image and link with link pull-right

Question

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

有人要求我在底部垂直对齐图像和 link 以及其中的图像。

我面临的问题是他们还希望 link 在 link/image 组合上有 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

P.S。抱歉，如果我的 bootstrap 代码因额外的 row 和 col-* 而变得臃肿，我仍在学习它。

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

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

*****您需要将一张图片设为绝对图片，将另一张图片设为相对图片以相互重叠这是相同代码的示例

尝试使用更多 bootstrap 个标签

body {
  padding-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
  <div class="col-xs-12 col-md-9 col-md-offset-1">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        
        <div class="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="short">
          </div>
         
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-sm-offset-4 col-md-offset-4 col-lg-offset-4">
            <img class="img-responsive"  style="position:absolute;margin:auto;border: 1px solid red; width: 60%;left: 20%;top: 20%;margin-top:20%" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w">
        
           <img class="img-responsive" style="relative; width:100%" src="http://static1.squarespace.com/static/54b97771e4b06f2c55eba94a/55be4ee1e4b0830374d48fb2/55be4f25e4b06dfa42778e26/1438535461984/4.jpg?format=300w"></a>
          </div>
          
        </div>
      </div>
    </div>
  
</div></div>
            <div id="push"></div>

Answer 2

向包含应与底部对齐的上下文的 div 行添加了 class：

.row {
      position: relative;
  }

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

html:

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

http://www.bootply.com/EbPZrjAw5w

另请阅读：

Bootstrap 3 bottom vertically align image and link with link pull-right

Bootstrap 3 bottom vertically align image and link with link pull-right

html

css

vertical-alignment

twitter-bootstrap

twitter-bootstrap-3