両側に空白を入れたブートストラップデザイン

Question

私はブートストラップを使ってウェブページをデザインしています。多くの人が大画面を使用しているので、コンテンツの中央に両側の空白があるウェブページが好きです。私はデザインのように作ることを試みた

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-fluidクラスをcontainerクラスに置き換えます。

<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