Bootstrap Nav fixed-top＆amp;布局问题

Question

我正在处理一个模型，但一直遇到导航栏和主要内容布局的问题。该页面需要看起来像桌面上的模型图像。

我已经尝试了我能想到的所有内容，并在引导网站上阅读但仍然遇到问题。

首先应该固定导航栏，以便它随你滚动。我已经从他们的一个模板中复制了它，但它不会像演示一样滚动，除非我将其更改为右拉。但是，如果我使用右拉，它会移除所需的顶部间距和第一个容器间距。我尝试过身体标签填充顶部，但它只是在导航和主要容器之间创建了更多的空间，而不是在导航器上方。

另一个问题是桌面中的行和列布局。 col-md-8不与其他col-md-4对齐。它在320宽的手机中看起来不错。

我拉我的头发，不知道需要修理什么。如果有人可以腾出一些时间看看，我真的很感激。

文件的实时链接如下。

link to image mockup
link to live webpage mockup
link to css override

Answer 1

1. 在您的CSS覆盖上，您具有属性.navbar（position：relative;）这将覆盖您的navbar固定顶级属性。
2. 就你的col-md-4而言..你把它包装在一个html描述符中......这就是：<!-- -->。这只是描述了列出的html属性。这些描述符存在于很多实际的html中，需要删除才能使代码正常工作。请记住，其中一些实际上是描述符......如<!--fixed navbar-->

Answer 2

hii刚检查了您的实时网站，所有问题都是您使用div标签的方式..所以对于图像和导航栏的第一部分，它应该在一个div标签中

<div class="col-md-12">
 <div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY 
</div>
</div>

和soo 希望这有助于您的页面格式化

Answer 3

现在似乎已经解决了所有问题。也许我遇到的最大问题是将导航栏放在桌面和放置的适当位置。移动。最初我使用.nav的覆盖修改边距以便在桌面上获得位置，但在移动视图中它将处于不同的位置，更不用说它保持共享80px top和120px的边距比率。这将强制切换菜单进一步向下80px而不是默认为0px。我无法想办法解决这个问题所以我想为什么不尝试为边距间距添加div标签。显然，在向媒体查询添加新信息后，这似乎有效。当使用导航和英雄图像处于平板电脑宽度时，还修复了间距问题。

至于布局的其余部分，我使用了col-md-3和col-md-7，除了需要一些填充之外，它几乎可以立即排列所有内容。除了h1和h3之外，我使用了一个简单的移动类来再次调整边距。

如果有更简单的方式或更有效的编码方式，我愿意接受建议，如果有人有的话。 Updated Live Link