ブートストラップ付きサイドバーナビゲーション4

Question

マイページの左側にナビゲーションを追加します。このナビゲーションにはページの高さが必要です。

ブートストラップグリッドシステムで構築しようとしました。しかし、この場合、ナビゲーションは幅が大きくなります。ナビゲーションサイドバーにcol-1だけを使用しても

例をWebで検索しましたが、何も見つかりませんでした。

私にリンクやヒントを教えてもらえますか？

これは私が構築したいものです。

Answer 1

あなたはそれが私を聞かせてください見つかっしかし場合（私はこれのための事があったことを確信していたが、私が間違っていた かのようにそれが表示されます知っている）。

幅を1列幅と同じに設定する2つのクラス.col-sm-fixedを追加しましたが、読みやすさのためにmax-widthとmin-widthが与えられています。

他

は関係なくはどのように大きな、この項目が行のためのスペースを埋めるために成長するように、ちょうどセットに flex値のプロパティを設定します .flex-autoです。また、私は flex-nowrap（ブートストラップから）を行に追加して、メインのコンテンツがプッシュオフできる場所で何かの偽善者が起きないようにしました。

これがあなたの問題を解決することを願っています。それ以外の場合は、質問を更新してください。私はあなたを助けてくれるでしょう。

編集私はcolあるflex-autoのブートストラップ同等のを見つけました。

link here

.col-sm-fixed { 
 
    flex: 0 0 8.333%; 
 
    max-width: 250px; 
 
    min-width: 100px; 
 
} 
 

 
.flex-auto { 
 
    flex: 1 1 50%; 
 
    min-width: 50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row flex-nowrap"> 
 
    <div class="col bg-info"> 
 
     <ul class="nav nav-pills flex-column"> 
 
     <li class="nav-item"><a class="nav-link active">Hi</a></li> 
 
     <li class="nav-item"><a class="nav-link">Howdy</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-11 pl-1 bg-warning"> 
 
     Main Content Here? 
 
    </div> 
 
    </div> 
 
</div>