Question

<section>    
    <div class="container">
       <div class="row">
           <div class="col-sm-8">
             <div class="row">
               <h1>some heading</h1>
               <p>bunch of text that pushes column down</p>
               <h1>some heading</h1>
               <p>bunch of text that pushes column down</p>
               <h1>some heading</h1>
               <p>bunch of text that pushes column down</p>
               <h1>some heading</h1>
               <p>bunch of text that pushes column down</p>
          </div>
          <div class="col-sm-4">
              <!-- this image should align at bottom of the row height -->
              <img src="black_image.jpg">
          </div>
       </row>
    </div>
</section>
<footer> <!-- BG color is same as image above -->
</footer>

以前曾经问过，但我还没有找到一个不错的答案。我已经尝试了在堆栈上发现的各种黑客，它们应该使列等于行的高度（xs-container，margin / padding等），然后对图像div应用一些定位，但它们似乎都没有产生结果我在寻找。

我想要完成的是让图像看起来好像从上面的行中的页脚中出来，以便它直接位于col-sm-8中的内容右侧，但是在底部对齐。我错过了什么吗？

Answer 1

您可以尝试col-md-offset-[value]课程。

你也可以试试这个：

<footer> 

  <div class="row">
    <div class="col-md-4 col-md-offset-8 imagefooter">
        <!-- image -->
    </div>
  </div>

</footer>

制作自定义style.css并定义imagefooter并将其设为负顶部。

底部的Bootstrap列高度和位置图像

1 个答案: