个人中心
gpt4 book ai didi

html - Bootstrap 导航栏覆盖文本

转载 作者：太空宇宙 更新时间：2023-11-04 03:14:49 25 4
gpt4 key购买 nike

我用 bootstrap 创建了一个“简单”的导航栏。现在导航栏覆盖文本。我试图给 .navbar 一个 50px 的 margin-bottom，但没有结果。这是 Page这里的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Seite</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        
        <link href="css/meine.css" rel="stylesheet">
      
    </head>
    <body>

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a class="navbar-brand" href="#">Startpage4you</a>
            </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Anmelden</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="row">
            <div class="col-md-2">.col-md-4</div>
            <div class="col-md-8">.ccol-md-8</div>
            <div class="col-md-2">.col-md-4</div>
        </div>
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

  • 我的样式表

.navbar{
    margin-bottom: 50px;
}

最佳答案

因为您的导航栏具有固定属性，所以其他所有内容都会出现在它下面，并被推到页面顶部。

因此，您只需将 margin-top:51px 添加到您的 div“行”，即可看到它。

不过，我会做的是将 div 类行放入容器中，然后将 margin-top 应用于容器。然后您可以将其用于后续页面。

关于html - Bootstrap 导航栏覆盖文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28883288/

25 4 0
文章推荐： python - matplotlib 动画内存泄漏
文章推荐： c - 使用 libmodbus 库从 RS485 modbus 连接读取数据超时
文章推荐： python - 在python中创建一个动态数组
文章推荐： html - 如何在此菜单中添加粗体？