W3CSS：ページを中央に配置する流体レイアウト？

Question

私はW3CSSを使用してレスポンシブサイトを構築しています。 私は思ったページを中央に置くために、彼らが提供する12列のシステムを使用したいと思っていました。私はw3-colにクラスw3-containerを割り当てる必要がありました

<div class="w3-container"> 
    <div class="w3-row"> 
     <div class="w3-col m2 l3 w3-container w3-blue"></div> 
     <div class="w3-col m8 l6 w3-container w3-white"> 
      <p> 
       Hello world! 
       <br> 
       <br> 
       Let's do this. 
       <br> 
       <br> 
       A lot of fun... 
      </p> 
     </div> <!-- Content Column --> 
    <div class="w3-col m2 l3 w3-container w3-red"></div> 
    </div> <!-- Content Container Row --> 
</div> <!-- Page Container --> 

：だから私はこのような何かをしました。それ以外の場合、レイアウトは機能しません。 w3-containerを追加することの欠点は、w3カラークラスがもう適用されないことです。 これはちょうどです。私の問題：content-divを囲む2つのdivが特定の色を持つようにします。しかし背景色は適用されません。 w3クラスを追加することも、CSSを使って手動で追加することもありません。 https://jsfiddle.net/timothys_monster/kp445w0u/10/

Answer 1

あなたが選択した親要素の.w3-contentクラスを使用する必要があり、その後、あなたが1200pxかそこらのようにそれのための最大幅を設定する必要があります。

は、ここで全体JSFiddleです。その内部には、必要に応じて12列のグリッドを使用できます。 Check here