html - Bootstrap 响应式布局问题 - Nav 消失和 div 重叠

标签 html css twitter-bootstrap responsive-design fluid-layout

我正在为我的投资组合网站使用 Twitter bootstrap。流畅的布局似乎在一定程度上起作用,但主页存在一些问题。

  1. 一旦我的尺寸小于 997 像素,导航菜单就会完全消失。它几乎看起来像是下降到标题栏下方并被隐藏,但我似乎无法显示它。它实际上应该切换到移动菜单并保留在右上角。

  2. 此外,一旦您使用较小的屏幕尺寸,索引页面的“关于我”和“联系方式”部分就会相互重叠。我确定这与我的结构有某种关系,但找不到问题。

任何 Bootstrap 专家都知道可能导致这些问题的原因是什么?

这是该网站测试版的链接。 http://theiamzone.com/kyle_hagler/portfolio-site

最佳答案

从我从站点查看的源代码来看, 我发现你缺少 jquery 文件。

<script src="//code.jquery.com/jquery-1.10.1.min.js">

放上它,看看下拉列表是否有效。

关于我们和联系我们部分。

您可以尝试的一种方法是用容器将它们全部包裹起来,阅读此处了解更多信息。 http://twitter.github.io/bootstrap/scaffolding.html#layouts

从我的 Angular 来看,在关于我们部分,尽量不要将 2 span 6 列换行, 请改用以下代码。

<div class="row-fluid">
    <div class="span12">
       <div class="span6"></div>
       <div class="span6"></div>
    </div>
</div>

同样的情况发生在联系我们部分, 没有为它们分配 css 类。

关于html - Bootstrap 响应式布局问题 - Nav 消失和 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17737519/

相关文章:

html - CSS + Javascript 正确缓存;想要防止重绘全局页面元素

javascript - 如何替换 youtube 链接并使其正常工作?

php - 如何在php中使用html div标签

twitter-bootstrap - Bootstrap 4.1 中的 bd-highlight 是什么?

html - 样式 INPUT ["Text"] 与 DIV - 输入稍大

css - 在 display-inline 中将元素放在彼此之上?

css - 居中 div - 显示 : inline-block;

css - 如何将多个sass目录合并成一个css文件?

css - 在另一列中 Bootstrap 列

javascript - 如何让 TinyMCE 全屏模式与 Bootstrap NavBar 一起工作