0

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

使用 position relative 和 bottom 0 ，跳出容器。

我的代码：http: //jsfiddle.net/qXT6K/118/

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

2 回答 2

1

如果您想将第一个跨度与行底部对齐，那么就有一个技巧。只需检查这个小提琴。

将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>
于 2013-05-30T10:22:21.467 回答
0

您使用.well添加 20px 底部边距的类；

添加你的CSS：

  .well {margin-bottom:0;}

见：http: //jsfiddle.net/bassjobsen/vZM85/

于 2013-05-28T20:37:11.367 回答