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

P.S。对不起，如果我的引导代码膨胀了额外的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行中添加了一个类，其中包含应与底部对齐的上下文：

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

HTML：

{{1}}

http://www.bootply.com/EbPZrjAw5w

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

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

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

2 个答案: