我正在研究一個模型，但仍然遇到Navbar和主要內容佈局的問題。該頁面需要在桌面上看起來像下面的樣機圖像。Bootstrap Nav固定頂部和佈局問題
我試過了所有我能想到的並在bootstrap網站上閱讀，但仍然遇到問題。
首先，應該固定導航欄，以便與您一起滾動。我已經從他們的一個模板中複製過來，但它不會像演示一樣滾動，除非我將其更改爲向右拉。但是，如果我使用拉右，它會刪除所需的頂部間距和第一個容器間距。我已經嘗試了body標籤padding-top，但它所做的只是在導航和不在導航之上的主容器之間創建更多空間。
另一個問題是桌面上的行和列布局。 col-md-8與其他col-md-4不一致。它在320寬的移動看起來很好。
我拉我的頭髮，不知道需要修復什麼。如果任何人都可以抽出一些時間看看，我會非常感激。
到文件的實時鏈接如下。
link to image mockup
link to live webpage mockup
link to css override
一切似乎是現在是固定的。也許我遇到的最大問題是將導航欄放在適當的位置，這兩個桌面都是移動版的桌面&。最初我使用.nav的覆蓋來修改邊距以便在桌面上獲得位置，但是在移動視圖中它將處於不同的位置，更不用說它一直保持80px的頂部和120px的邊距比率。這將強制切換菜單爲80px，而不是默認的0px。我無法解決這個問題，所以我想了解爲什麼不嘗試添加一個div標籤僅用於邊距。顯然這似乎在向媒體查詢添加新的信息之後起作用。當使用導航和英雄圖片的平板寬度時，還修復了間距問題。
至於佈局的其餘部分，我使用了col-md-3和col-md-7，除了需要一些填充之外，它幾乎將所有東西都排列起來。其他一切像h1和h3我使用一個簡單的移動類來再次調整邊距。
如果有更簡單的方法或更有效的編碼方式，我願意接受建議，如果任何人有一些。 Updated Live Link
<!-- -->。這只是描述了html屬性的列表。這些描述符在很多實際的html上，需要刪除才能使代碼正常工作。但要記住他們中的一些實際上是描述符......像<!--fixed navbar-->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>
和洙 希望這有助於您的格式頁面
好吧，我想我已經修復了桌面佈局（實時頁面更新）。到目前爲止，我在移動領域看起來還不錯。除了我想刪除一些間距和邊距，並可能在幾個斷點或媒體查詢中更改佈局。我猜這是做到這一點的唯一方法。但是，如果在切換按鈕和徽標頂部切換菜單列表項時沒有完全確定如何移除m-queries（如移動導航）中的間距。它似乎分享桌面的利潤。 任何想法？ – user2407463
如何更改導航欄中的邊距？在桌面斷點991處，導航下降到徽標下方，但保留了空白，在徽標和導航之間留下了很大的空間。我嘗試過新課程等，但沒有任何作用。有沒有辦法打破它進行調整？ 相同的邊距也適用於移動切換菜單。 – user2407463
好吧我想我已經通過使用帶有邊距和填充的新div來解決斷點991處的間距問題。但我仍然無法弄清楚爲什麼利潤率仍然導入到移動導航中。有任何方式來重置導航時，在移動到0'？新的div仍然使用margin 80px和margin 120px。移動導航需要以某種方式重置。有人知道怎麼修這個東西嗎？請任何幫助表示讚賞。謝謝 – user2407463
對不起，網站暫時關閉。再次運行。 – user2407463