Bootstrap 4-beta navbar-inverse和navbar-fixed-bottom不工作

时间:2017-10-16 14:18:33

标签: html css asp.net twitter-bootstrap

我试图在ASP.NETCore Web应用程序中使用Bootstrap 4-beta设置导航栏和页脚但是Bootstrap的导航栏工作不正常我使用了navbar-inverse和navbar-dark但问题是一样的我还尝试使用导航栏和导航栏固定底部设置页脚,但页脚不在页面底部。我是Bootstrap和ASP.NET MVC的新手。

HTML

<div id="wrapper">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid" style="display:flex; justify-content:flex-end; align-items:center;">
            <ul class="nav navbar-nav">
                <li>
                    <button id="sidebarToggle" class="btn btn-primary">
                        <i class="fa fa-angle-double-left"></i>
                    </button>
                </li>
            </ul>
            <a asp-controller="App" asp-action="Index" class="navbar-brand mr-auto" style="color:cornflowerblue">
            The World
            </a>
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" class="btn btn-sm btn-info">
                        <i class="fa fa-save"></i>Save
                    </a>
                </li>
                </ul>
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" class="btn btn-sm btn-info">
                        <i class="fa fa-print"></i>Print
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="main" class="container-fluid">
        <div>
            @RenderBody() 
        </div>
    </div>

    <div id="footer" class="container-fluid">
        <footer>
            <div  class="navbar navbar-fixed-bottom">
                <h4 class="text-center text-primary">Copyright &copy; 2017</h4>
            </div>
        </footer>
    </div>
</div>

结果: Result: 我做错了什么?谢谢!

1 个答案:

答案 0 :(得分:3)

因为在Bootstrap 4中他们将 .navbar-fixed-bottom 更改为 .fixed-bottom