Question

我正在使用django和bootstrap，但我遇到了一个我无法解决的小问题。问题是base.html上的导航栏位于profile.html上的div上。什么时候不应该。请参阅图像以澄清问题。

文件：

base.html文件

if !str.isEmpty {
        let components = str.characters.split(separator: "/")
        let head = components.dropLast(1).map(String.init).joined(separator: "/")
        let words = components.count-1
        let tail = components.dropFirst(words).map(String.init)[0]

        print("head:",head,"tail:", tail) // head: 11/Passion tail: 01PassionAwakening.mp3
    } else {
        print("path should not be an empty string!")
    }

Profile.html

<!DOCTYPE html>
    {% load staticfiles %}
<html>


<head>
    <link href="{% static 'css\bootstrap.min.css' %}" rel="stylesheet">

</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <a class="navbar-brand" href="#">MyTweets</a>
        <p class="navbar-text navbar-right">User Profile Page</p>
    </nav>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
        <p class="navbar-text navbar-right">Footer </p>
    </nav>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>

当我渲染时，我得到了这个：

如何分开它们？每一个都是一个不同的容器，我不明白发生了什么......重要的是：如果我改变变焦它会变得更好！

谢谢

Answer 1

您的导航栏固定在屏幕顶部，不会考虑相对定位。将顶部填充物添加到您的身体或容器的顶部边缘（大约70px）。

body {
    padding-top: 70px;
}

有关Bootstrap的示例，请参阅：https://getbootstrap.com/examples/navbar-fixed-top/

Navbar过度扩展块内容，如何解决？

1 个答案: