Bootstrap 3底部垂直对齐图像并链接与链接拉右

Posted 2023-03-05

【中文标题】Bootstrap 3底部垂直对齐图像并链接与链接拉右

【英文标题】：Bootstrap 3 bottom vertically align image and link with link pull-right

【发布时间】：2016-03-25 20:06:44

【问题描述】：

我希望有人能帮我解决这个 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

附：抱歉，如果我的引导代码中包含额外的 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 -->

【问题讨论】：

您想在底部对齐两个项目还是您有想要结果的图像？

是的，我希望悍马标志的底部与钢铁侠照片的底部对齐。我需要做的就是弄清楚如何在保持响应的同时将悍马徽标向下移动，但对于我的生活，我无法弄清楚

啊，是的，我错过了该部分的一些内容，谢谢

【参考方案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://***.com/a/24539629/1165509

【讨论】：

顺便说一句，网格布局列设计包括较大的列，因此如果您为 xs 指定大小，它将为所有较大的列设置相同的大小，除非您为较大的列指定其他大小。跨度>

【参考方案2】：

*****您需要将一个图像设置为绝对图像，而另一个图像相对于彼此重叠 这是相同代码的示例

---

尝试使用更多的引导标签

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>