时间戳

首页 > 解决方案 > 在表单顶部设置固定导航

css - 在表单顶部设置固定导航

问题描述

我正在使用 Bootstrap 4，并且我有一个 div 作为 3 行的容器。

第 1 和第 3 行将被固定，而中间（内容）是一个大表单并且会滚动，而第 1 和第 3 行将始终可见。

我无法提供此帮助，请您帮忙。

下面是我的代码：

<div class="container">
        <div class="d-flex justify-content-center" style="position: absolute;left:20%;right:5%;top:10%;z-index: 1000;">
            <div class="col-4">
                    <!-- Top navigation -->
                    <nav class="navbar navbar-default" role="navigation" id="navbar-example">
                        <div>
                            <ul class="nav navbar-nav">
                                <li><a href="#profile">Profile</a></li>
                                <li><a href="#">Courses</a></li>
                            </ul>
                        </div>
                    </nav>
            </div>
        </div>
        <div class="row" style="padding-top: 5%;">
            <input type="hidden" id="_token" >
            <div class="col-md-12">
                <div class="box box-primary">
                    <!-- /.box-header -->
                    <!-- form start -->
                    <form class="form-horizontal"
                          data-target="#navbar-example" id="adaptation_form">
                        <div class="box-body">
                            <div id="profileAnchor" class="box box-secondary">
                                <div class="box-body">
                                    <div class="panel panel-info">
                                        <div class="panel-heading">Profile</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <!-- /.box-footer -->
                    </form>
                    <div class="box-footer">
                        <a type="button" href="{{ route('adapt.cancel', [$id]) }}" class="btn btn-default">Cancel</a>
                        <button id="create_dataset" name="create_dataset" type='submit'
                                class="btn btn-primary pull-right">Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

我希望修复顶部导航和页脚，我尝试使用 position:fixed 但滚动时它与内容重叠。

截图供参考：在下图中，有一个带有个人资料和课程的标题，我希望修复其余内容，如果滚动应该仍然使标题固定且可见。 在此处输入图像描述

我尝试使用位置：固定，但是当我滚动内容时它会重叠。 在此处输入图像描述

标签： cssbootstrap-4

解决方案

您可以在页脚中使用sticky-topd navbar which will always stick your navbar to the top. Next use -flex flex-column min-vh-100 to the body and addmt-auto fixed-bottom` 的类。因此，您的页脚将固定在页面底部。下面是工作片段

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<body class="d-flex flex-column min-vh-100">
  <nav class="navbar sticky-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Sticky top</a>
  </nav>
  <section>
    <p>
      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The
      point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
      Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
  </section>
  <footer class="mt-auto fixed-bottom text-center text-white bg-dark pt-2 pb-2"> footer</footer>
</body>

推荐阅读