Question

我有几个并排坐着的div，需要按钮在底部我需要按钮位于.col-sm-4容器的底部，而h3标签没有将其推出。有没有人有黑客或某种解决方案？

h3标签大小需要响应，因为它的文本可能会发生变化。我已经把盒子推出了容器，但现在我卡住了。

____________________更好的解释_______________

我的h3标记正在将.col-sm-4推送到容器外部。我需要按钮位于div的底部。

在这个js.fiddle中，我提供了两个div。第一个是我想要按钮的位置，但我需要h3标签看起来像div 2.如果按钮没有被推出容器，我似乎无法实现第二个div。

https://jsfiddle.net/19obrm0q/1/

编辑 - h4 - ＆gt; H3。

Answer 1

你不能将一个非零高度的元素放在与full-height div相同的容器中，并期望两者都适合父母高度的100％。这就是height: 100%的含义。

我已经再次尝试过，这次将h3保持在col-sm-12之外。为了完成这项工作，我已将full-height班级提升到了col-sm-4。我还必须将center-bottom元素移到col-sm-12之外。这是因为现在col-sm-4是具有已定义高度的元素，它也应该是定义absolute元素的位置上下文的元素。

https://jsfiddle.net/19obrm0q/7/

Answer 2

首先，你的标记在两列之间略有不同：一个在父div中有h3，另一个在前/外有它，这有助于使它们看起来不同。

但我建议的解决方案是填充父母的底部，以便确保有绝对定位按钮的空间。

看看： https://jsfiddle.net/19obrm0q/3/

Answer 3

https://jsfiddle.net/19obrm0q/5/

经过多次摆弄：BEFORE：

<div class="col-sm-12 bg-white pad-sm-top text-center full-height full-width">
        <h3 class="clear-margin text-banner-activity fix text-center"> SOME TEXT</h3>
        <p class="clear-margin">SOME TEXT</p>
        <div class="center-bottom">
          <a href="#" role="button" class="btn btn-activity-light btn-md"> Learn more &gt; </a>
        </div>
      </div>
    </div>

和之后：

<div class="col-sm-4 no-pad bg-white">
   <h3 class="clear-margin text-banner-activity text-center">heading</h3>
      <div class="col-sm-12 pad-sm-top pad-xlg-bot text-center">
        inner
      </div>
      <a href="#" role="button" class="btn btn-activity-light btn-md center-bottom">
        button
      </a>
    </div>

我移动了div并摆脱了嵌套按钮的div，现在它可以正常工作，无论列的大小如何，按钮都位于底部。

全高度响应div被h3阻塞

3 个答案: