サイドバーのTwitter Bootstrapのドキュメントでは、どのコンポーネントが使用されていますか？

Question

私はブートストラップ4.私に

とサイドバーのこの種を構築するための最も簡単な方法は何か思ったんだけど、それは彼らがドキュメントのページのために構築されたカスタム・コンポーネントのように見え、フレームワークには含まれていません。私が正しいかどうかは分かりません。

<ul class="nav bd-sidenav"> 
    <li class="active bd-sidenav-active"> 
    <a href="/docs/4.0/getting-started/introduction/"> 
     Introduction 
    </a> 
    </li> 
    <li> 
    <a href="/docs/4.0/getting-started/download/"> 
     Download 
    </a> 
    </li> 
    ... 
</ul> 

私が得た最も近い

はこのようなものを作成することであった。

<ul class="nav"> 
    <li class="w-100"> 
    <a href="#"> 
     Item 1 
    </a> 
    </li> 
    ... 
</ul> 

しかし、私はより良い方法があるはずだと思います。

ブートストラップ4でこのようなサイドバー/目次を作成する正しい方法は何ですか？

Answer 1

は、ここでは、右のコンテンツとナビゲーションのサイドバーを作成することができます方法は次のとおりです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-3"> 
 
     <nav class="nav flex-column"> 
 
     <a class="p-1 nav-link active" href="#">Active</a> 
 
     <a class="p-1 nav-link" href="#">Link</a> 
 
     <a class="p-1 nav-link" href="#">Link</a> 
 
     <a class="p-1 nav-link disabled" href="#">Disabled</a> 
 
     </nav> 
 
    </div> 
 
    <div class="col bg-secondary"> 
 
     Here's your content! Added class bg-secondary for gray background. 
 
    </div> 
 
    </div> 
 
</div>

あなたは垂直のNAV here、およびグリッドシステムhereについての詳細を読むことができます。

基本的に、画面の残りの部分を使用して画面の1/4とコンテンツを取得するnavでグリッドを作成しています。