ブートストラップで3列流体レイアウトを作成するには？

Question

重複していると申し訳ありませんが、私の質問に対する答えが見つからないようで、ブートストラップに問題があります。

ウェブページ用に3列のレイアウトを作成しようとしています。私は各サイドバーが3つの列を取り、そのスペースを埋めるようにして、中央のコンテンツ領域を6にしてスペースを埋めるようにします。私は例をオンラインで見つけて少し微調整しましたが、私が望む結果を得ることができませんでした。

<div class="container-fluid" id="container"> 
<div class="row-fluid"> 
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" > 
     <div class="sidebar-nav-fixed affix" id="Left-Side"> 
      <div class="well"> 
       <ul class="nav "> 
        <li class="nav-header">Sidebar</li> 
        <li class="active"><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/sidebar-nav-fixed --> 
    </div> 
    <!--/span--> 
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 span-6" id="Content"> 
     <div class="jumbotron"> 
      <h1>Hello, world!</h1> 

      <p> 
       This is a template for a simple marketing or informational website. It 
       includes a large callout called the hero unit and three supporting pieces 
       of content. Use it as a starting point to create something more unique. 
      </p> 
      <p> 
       <a class="btn btn-primary btn-lg">Learn more »</a> 
      </p> 
     </div> 

    </div> 
    <!--/span--> 
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" id="Right-Side"> 
     <div class="sidebar-nav-fixed pull-right affix"> 
      <div class="well"> 
       <ul class="nav "> 
        <li class="nav-header">Sidebar</li> 
        <li class="active"><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/sidebar-nav-fixed --> 
    </div> 
    <!--/span--> 
</div> 
<!--/row--> 

これは私の知る限り得ているようです。私はブートストラップを使うのがとても新しいので、正しく使う方法を本当に理解していません。ちょうどこの場合、私はASP.NETでこのプロジェクトをやっています。

Answer 1

あなたのコードが正しいか、それが必要としてレイアウトがレンダリングされます。あなたの問題は、あなたのサイドバーの「接辞」クラスがコンテンツの幅に崩壊していることです。これらのサイドバーが固定された位置に必要ですか？そうでない場合は「接辞」クラスを削除します。それ以外の場合は、3列の間隔を埋めるためにこれらのコンテナに幅を与えなければなりません。

はこのような何かを試してみてください...

.sidebar-nav-fixed { 
width: 25%; 
padding-right: 30px; 
}