在bootsrap的导航条和正文上增加一层，使其保持可滚动。

问题描述 投票：0回答：1

我的导航条是固定的，主体是可以滚动的。我想在导航条上加一层，而不影响滚动功能，但我的导航条是固定在顶部的。如何解决这个问题，下面是我的代码

<html lang="en">

<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">

</head>

    <style>
    body{
        padding-top: 40px;
    }
    </style>

<body data-spy="scroll" data-target="#my-navbar">
  <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div><!-- Navbar Header-->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#feedback">Home</a>
                        <li><a href="#features">Our Services</a>
                    <li><a href="#gallery">Gallery</a>
                    <li><a href="#faq">Faq</a>
                    <li><a href="#contact">ContactUs</a>
                </ul>
            </div>
        </div><!-- End Container-->
    </nav><!-- End navbar -->
html css twitter-bootstrap-3
1个回答
0
投票

你可以将你的内容包裹在 navbar-fixed-top 类。

<html lang="en">
<head>
    <meta charset="utf-8">
    <title> hot</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">
</head>

<style>
    body {
        padding-top: 90px;
    }

    .root {
        
        min-height: 100vh;
    }
</style>

<body data-spy="scroll" data-target="#my-navbar">
    <div class="navbar-fixed-top">
        <p>I am top of navbar</p>
        <!-- Navbar -->
        <nav class="navbar navbar-inverse" id="my-navbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div><!-- Navbar Header-->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#feedback">Home</a>
                            <li><a href="#features">Our Services</a></li>
                            <li><a href="#gallery">Gallery</a></li>
                            <li><a href="#faq">Faq</a></li>
                            <li><a href="#contact">ContactUs</a></li>
                        </li>
                    </ul>
                </div>
            </div><!-- End Container-->
        </nav><!-- End navbar -->
    </div>
    
    <div class="root">
        <p>MY HEIGHT IS TOO LONG</p>
    </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.