爲什麼我的代碼不響應？

-1

我想我正在使用正確的Bootstrap結構，類等。那麼，爲什麼當我調整瀏覽器大小時，佈局會完全搞砸了？我究竟做錯了什麼？爲什麼我的代碼不響應？

body { 
    font-family: 'Roboto', sans-serif; 
} 
h2 { 
    font-size: 32px; 
    font-weight: bold; 
} 
h3 { 
    font-size: 16px; 
    font-weight: bold; 
} 
.container { 
    max-width: 1056px; 
} 
p { 
    font-size: 14px; 
} 
nav.navbar { 
    padding: 12px; 
    border-radius: 0; 
    border: none; 
    margin-bottom: 0; 
    background: none; 
} 
nav.navbar li { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
nav.navbar li a { 
    padding: 8px 20px; 
    margin-top: 0.5em; 
    border-radius: 4px; 
} 
nav.navbar li a:link { 
    color: #9faeaf; 
} 
nav.navbar li a.active:link, 
nav.navbar li a.active:visited { 
    color: #fff; 
}

來源

2016-08-06 Sam

你必須顯示HTML太。 – JJJ

也許你已經覆蓋了大量的css – jonju

@Juhana這一切都在codepen鏈接。 – Sam

的主要原因佈局不響應是因爲你已經在你的CSS設置明確的高度規則。以section#about爲例，如果您刪除在樣式表中設置的明確height: 980px;，像素完美段落將不再與重疊尋找完美的模板使用？標題。

其次，您不正確地使用Bootstrap網格。我注意到你幾乎每節都有一個.container類。理想情況下，你應該刪除那些，並且只有一個一個.container類封裝整個頁面（除非你想在一個頁面上使用不同的容器大小）。

下面是一個例子：

<body> 
    <div class="container"> 
     <section id="intro" class="row"> 
      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 

      <div class="col-md-4"> 
      </div><!-- end .col-md-4 --> 
     </section><!-- end #intro section --> 

     <section id="about" class="row"> 
      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 

      <div class="col-md-6"> 
      </div><!-- end .col-md-6 --> 
     </section><!-- end #about section --> 
    </div><!-- end .container --> 
</body>

注意：有一個與導航欄/頁腳，在這種情況下，你可以把單獨的容器內這些元素，你已經做了一個例外與Navbar。

第三，將更多的.row類用作頁面上每個垂直部分的「塊」。你在你的章節中做過這些，但是在你從每個章節中刪除容器之後，通過給它們分類.row來讓章節本身也可以是單獨的行。

接下來，你不需要定義規則，每個屏幕尺寸爲kosmastsk建議。如果你喜歡它的外觀，只需定義col-sm的斷點，那麼這取決於你。不過，如果您開發mobile first並且以更大的屏幕尺寸工作，它會更好看。

也可以考慮使用更多的CSS Media Queries，以幫助您更好地自定義您的網站，如果你必須超越的高度，寬度等

來源

2016-08-06 19:54:52

感謝您抽出時間。順便說一句，我沒有包裝一個容器周圍的一個容器，但後來我無法做全寬的背景。有沒有辦法解決這個問題？ – Sam

在這種情況下，將所有內容都包裝在'.container-fluid'類中並覆蓋Bootstrap的CSS以從'.container-fluid'中移除填充，以便所有內容都佔用視口的全部寬度。之後，您可以擁有全寬背景，但是您的內容（文本）也可以是全寬。爲了解決這個問題，我會使用引導列作爲較小的容器（例如'.col-xs-10'）和[center that column]（http://stackoverflow.com/a/18153551/5228504）。這樣，你仍然可以像在常規的'.container'類中一樣使用'.row'和更多的列類。 –

在HTML代碼中，你只使用COL-SM-*。因此，瀏覽器使用.sm，.md和.lg類的結構，但不知道如何處理.xs類（< 768 px）。所以，請先嚐試定義xs類。例如，使用該代碼爲每個格

<div class="col-xs-12 col-sm-4"> ... </div>

來源

2016-08-06 19:31:26 kosmastsk

還是完全搞砸了。 – Sam

[看看這個]（http://codepen.io/kosmastsk/pen/OXBYqA）不是更好嗎？我會建議你先從.xs類開始開發。 Bootstrap可以讓你更輕鬆地使用這種方式 – kosmastsk

爲什麼我的代碼不響應？

回答

相關問題