Question

我正在尝试将DIV对齐到容器的底部，但它不起作用。

使用位置相对和底部0，跳出容器。

<div class="row-fluid" style="border: 1px red dashed;">
    <div class="span4 well text-center">
        <p>BOX1</p>
    </div>
    <div class="span4 text-right well" style="position:absolute;bottom:0;">
        <form action="demo_form.asp" style="margin:0px;">
            <input style="padding: 0;margin-top: 10px;" class="input-mini" type="text" name="user" placeholder="USER">
            <input style="padding: 0;margin-top: 10px;" class="input-mini" type="password" name="PASS" placeholder="PASS">
            <button style="margin-right: 3px;" type="submit" class="btn btn-small btn-primary disabled" disabled="disabled"> <i class="icon-user icon-white"></i>

            </button>
        </form>
    </div>
</div>

Answer 1

如果你想将第一个跨度底部对齐到行，那么就有一个黑客。只需查看此fiddle即可。

将position:relative;样式设置为外部行 - 流类。并将position:absolute;设置为第一个范围。要在其位置设置第二个跨度，您必须添加 offset4 ，如下所示格式：

<div class="row-fluid" style="border: 1px red dashed;position:relative;">
    <div class="span4 well text-center" style="position:absolute; bottom:0;">
        <p>BOX1</p>
    </div>
    <div class="span4 text-right well offset4" style="">
        <form action="demo_form.asp" style="margin:0px;">
                    <input style="padding: 0;margin-top: 10px;" class="input-mini" type="text" name="user" placeholder="USER">
                    <input style="padding: 0;margin-top: 10px;" class="input-mini" type="password" name="PASS" placeholder="PASS">
                    <button style="margin-right: 3px;" type="submit" class="btn btn-small btn-primary disabled" disabled="disabled">
                        <i class="icon-user icon-white"></i>
                    </button>
                </form>
    </div>
</div>

Answer 2

您使用类.well，其中添加了20px的边距底部;

添加你的css：

  .well {margin-bottom:0;}

请参阅：http://jsfiddle.net/bassjobsen/vZM85/

使用Twitter的Bootstrap 2.x将div与底部对齐

2 个答案: