Bootstrap 列高和底部位置图像

Posted 2023-03-06

【中文标题】Bootstrap 列高和底部位置图像

【英文标题】：Bootstrap column height and position image at bottom

【发布时间】：2014-12-01 23:23:13

【问题描述】：

<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 容器、边距/填充等），然后对图像 div 应用一些定位，但它们似乎都没有产生结果我在寻找。

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

【问题讨论】：

制作等高列（两者都具有最高列的高度）的唯一方法是表格或 css display: table。但你似乎不需要这里。您只需将该 img 放入 row，然后再放入 position: absolute; bottom: 0;。对于表格，您需要在第二列使用vertical-align: bottom。

它还不是标准的 CSS（还），但有一种使用 flex-boxes 的新技术。我一个，很期待这个！ css-tricks.com/snippets/css/a-guide-to-flexbox

雅表不是一个选项。杀死响应能力。在手机上，图像应该在内容下方滑动，并且仍然看起来好像从页脚中出来一样。

同意 Wouter。它有趣的东西。感谢您的链接。但缺乏浏览器支持。

请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的东西

【参考方案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 并定义图片页脚并给它一个负顶部。

【讨论】：

嗯...这个有一些承诺。让我今晚试试，然后回复你。