Bootstrap 3 - 将导航拉到底部答案

【问题标题】：Boostrap 3 - pull navigation to bottomBootstrap 3 - 将导航拉到底部
【发布时间】：2014-08-18 10:29:55
【问题描述】：

我正在尝试做这样的事情

使用 bootstrap3

但我对这种简单的导航有疑问。我需要将它们放在列的底部。

请检查此代码：http://www.bootply.com/LY3P6GAp1p

        <div class="row">
            <div class="col-md-5 col-md-offset-1" style="display: table-cell;">
                <h2 style="text-align: center;">Some text</h2>
            </div>

            <div class="col-md-6" style="display: table-cell; vertical-align: bottom;">
                <ul class="nav nav-pills">
                    <li><a hre="#">Option1</a></li>
                    <li><a hre="#">Option2</a></li>
                </ul>
            </div>
        </div>

我尝试使用：相对/绝对位置、表格、表格单元格 - 没有任何作用：/

【问题讨论】：

标签： css navigation twitter-bootstrap-3

【解决方案1】：

<div class="col-md-6" style="display: table-cell; vertical-align: bottom;">
                <ul class="nav nav-pills">
                    <li><a hre="#">Option1</a></li>
                    <li><a hre="#">Option2</a></li>
                </ul>
            </div>


<div class="col-md-6" style="display: table-cell; vertical-align: bottom; position:absolute; right:0; bottom:20px">

【讨论】：

感谢您的回复，但是，所有带有“位置：绝对”的代码都没有响应：/@spry_nandkishore：您的解决方案：bootply.com/7jA7PIGsIO - 我只是添加了边框 - 所以这是错误的 - 但还是谢谢。我用 > table / table-row 和 table-cell bootply.com/Dm75PTp84q 编写了一些代码，但它仍然没有响应。必须有某种方法可以在没有 JavaScript 的情况下做到这一点。

【解决方案2】：

<div class="col-md-6" style="display:inline-block;position:absolute; right:0; bottom:0">

【讨论】：

虽然这可能会回答问题，但请提供一些评论或说明它的作用。

【解决方案3】：

试试这个：

CSS：

.content {
            position: absolute;
            bottom: 0;

        }

HTML：

       <div class="row div1">
            <div id="Div1" class="col-md-5 col-md-offset-1 text-center">
                <h2>Some text</h2>
            </div>
            <div id="Div2" class="col-md-6">
                <ul class="nav nav-pills content">
                    <li><a href="#">Option1</a></li>
                    <li><a href="#">Option2</a></li>
                </ul>
            </div>
       </div>

脚本：

        $(document).ready(function () {
            var divHeight = $("#Div1")[0].clientHeight;
            $("#Div2").css('height', divHeight + 'px');
        });

希望这可能有用

【讨论】：