文章/答案/技术大牛

发布

社区首页 >问答首页 >让Bootstrap 4导航栏边栏扩展到页面的完整高度

问让Bootstrap 4导航栏边栏扩展到页面的完整高度
EN

Stack Overflow用户

提问于 2019-05-09 04:53:33

回答 1查看 2K关注 0票数 0

我第一次在.NET MVC (而不是核心)启动器应用程序中使用Bootstrap4。在Nuget中引导程序版本更新到4.1。

我需要在顶部有一个水平导航栏以及在左侧有一个垂直导航栏(侧边栏)。

我一直在做的例子是：https://getbootstrap.com/docs/4.1/examples/dashboard/

我遇到的问题是，侧边栏只向下延伸到主页面内容，我一直无法让它延伸到页面的100%。我尝试过在导航栏和侧边栏相关的div上手动设置高度，但没有效果。

_Layout.cshtml：

<body>
   <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
  </nav>
    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <span data-feather="home"></span>
                            Dashboard <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="file"></span>
                            Orders
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="shopping-cart"></span>
                            Products
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="users"></span>
                            Customers
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="bar-chart-2"></span>
                            Reports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="layers"></span>
                            Integrations
                        </a>
                    </li>
                </ul>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Saved reports</span>
                    <a class="d-flex align-items-center text-muted" href="#">
                        <span data-feather="plus-circle"></span>
                    </a>
                </h6>                 
            </div>
        </nav>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">      
                @RenderBody()               
        </main>
    </div>
  </div>
</body>

Index.cshtml：

<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

它的外观(黄线表示我希望侧边栏向下延伸到的位置)：

asp.net-mvc

bootstrap-4

navbar

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-09 06:02:29

这是一个有点棘手的问题。Bootstrap使用额外的CSS来完成此布局。它不会只与Bootstrap一起工作。他们添加了一个类".sidebar"：

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

下面是一个代码笔示例：https://codepen.io/anon/pen/oRjmBN

我还添加了一个'overflow-y: auto‘，以防侧边栏中的内容变长。

希望这能有所帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56048910

复制

相似问题

问让Bootstrap 4导航栏边栏扩展到页面的完整高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让Bootstrap 4导航栏边栏扩展到页面的完整高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让Bootstrap 4导航栏边栏扩展到页面的完整高度
EN