为什么我的标题被导航栏覆盖?引导程序

2024-03-07

我正在计划使用 boostrap,并想知道为什么当我使用内置类时我的标题仍然被切断。我可以使用 css 来移动它,但我想在使用引导标头类时不需要添加自己的 css。

这是生成的页面,我使用的是 VS 2013 中的 Asp.net MVC 5.1。所以很多内容都在母版页中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - My ASP.NET Application</title>



    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>




</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top">
        <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>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/home/index">Home</a>
                    </li>
                    <li>
                        <a href="#">Resume</a>
                    </li>
                    <li>
                        <a href="/home/portfolio">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">



<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Portfolio</h1>
        </div>
    </div>


</div>



        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text">&copy; 2014 - My ASP.NET Application</p>
            </div>
        </div>

        </div>

    <script src="/Scripts/jquery-2.1.0.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c8d12fe59c90426f9175a363b9a06484"}
</script>
<script type="text/javascript" src="http://localhost:58343/af7b5f6142444a738445c2a2e5c5a6d7/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

使用固定顶部导航栏时,您必须添加手动填充。

根据引导文档,

需要身体填充

固定导航栏将覆盖您的其他内容,除非您在正文标记的顶部添加填充。尝试您自己的值或使用下面的代码片段。提示:默认情况下,导航栏的高度为 50 像素。

body { padding-top: 70px; }

确保包含此内容after核心 Bootstrap CSS。

Source: http://getbootstrap.com/components/#navbar-fixed-top http://getbootstrap.com/components/#navbar-fixed-top

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么我的标题被导航栏覆盖?引导程序 的相关文章

  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red
  • 禁用 Bootstrap 中的选项卡

    我正在尝试禁用引导程序中的选项卡 我一直在研究 但尚未找到解决方案 我已经尝试过这个 可以禁用 Bootstrap 中的选项卡吗 https stackoverflow com questions 9237314 can you disab
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • MVC 项目中的 .Rdlc 报告 - 托管调试助手“PInvokeStackImbalance”

    我即将完成并运行我的上一份报告 我在其他报告中没有遇到过这个问题 我正在尝试根据数据库记录创建报告 当我通过 LocalReport 创建报告并为报告创建参数时 收到错误消息 托管调试助手 PInvokeStackImbalance 调用
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • ASP.NET MVC 应用程序中的工作单元模式

    我一直在看这个优秀的blog http www nhforge org wikis patternsandpractices nhibernate and the unit of work pattern aspx标题为 NHibernat
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • ASP.NET MVC,控制器可以改变提交的值吗?

    ASP NET MVC 中是否允许更改提交的值 HttpPost public ActionResult Create Person toCreate toCreate Lastname toCreate Lastname A return
  • Bootstrap 折叠导航菜单

    我正在尝试使用 Bootstrap 折叠插件 但收效甚微 我想要一个带有隐藏子菜单的手风琴式导航菜单 我的 HTML 和 JS ul class nav nav list li class nav header span Home span
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐