白色空間雙方的自舉設計

Question

我使用Bootstrap來設計網頁。由於許多人使用大屏幕，我更喜歡網頁的內容以雙面空白爲中心。一個例子是此頁：

https://www.nhstateparks.org/visit/state-parks/dixville-notch-state-park.aspx

我試圖做一個設計是這樣的：

<div class="container-fluid text-center"> 
     <div class="row content"> 
      <!--Uses an offset to get white space on left --> 
      <div class="col-sm-2 col-md-offset-2"> 
       Sidebar with some links 
      </div> 
      <div class="col-sm-6"> 
       Main content 
      </div> 
      <div class="col-sm-2"> 
      <!--This is added only to get white space on right --> 
      </div> 
     </div> 
    </div> 

但我想在頁面的行爲類似於此頁面做的。縮小頁面時，它會在開始縮放內容之前「左右」使用空白空間。我看到stackoverflow.com也做到這一點。它不會在使用雙方的空白區域之前開始縮放內容。

Answer 1

用container類代替container-fluid類。

<div class="container"> 
    <div class="row"> 
     <!--Uses an offset to get white space on left --> 
     <div class="col-sm-2"> 
      Sidebar with some links 
     </div> 
     <div class="col-sm-6"> 
      Main content 
     </div> 

    </div> 
</div