Divsはサイトを拡大して配置しません

Question

私の問題は、サイドバーとテーブルを垂直に並べることができないということです。彼らは身体をより長い幅にし、並んで立っていません。私はテーブルに「フロート：左」のスタイルを与えようとしましたが、それでもそのサイトは拡大してしまい、よく見えませんでした。私はブートストラップ、CSSのHTML使用していますが、より良い理解私が見ることができるものから、

sidebar { 
 
    overflow: hidden; 
 
    z-index: 3; 
 
} 
 
#sidebar .list-group { 
 
    min-width: 400px; 
 
    background-color: #333; 
 
    min-height: 80vh ; 
 
} 
 
#sidebar i { 
 
    margin-right: 6px; 
 
} 
 

 
#sidebar .list-group-item { 
 
    border-radius: 0; 
 
    background-color: #333; 
 
    color: #ccc; 
 
    border-left: 0; 
 
    border-right: 0; 
 
    border-color: #2c2c2c; 
 
    white-space: nowrap; 
 
} 
 

 
/* highlight active menu */ 
 
#sidebar .list-group-item:not(.collapsed) { 
 
    background-color: #222; 
 
} 
 

 
/* closed state */ 
 
#sidebar .list-group .list-group-item[aria-expanded="false"]::after { 
 
    content: " \f0d7"; 
 
    font-family: FontAwesome; 
 
    display: inline; 
 
    text-align: right; 
 
    padding-left: 5px; 
 
} 
 

 
/* open state */ 
 
#sidebar .list-group .list-group-item[aria-expanded="true"] { 
 
    background-color: #222; 
 
} 
 
#sidebar .list-group .list-group-item[aria-expanded="true"]::after { 
 
    content: " \f0da"; 
 
    font-family: FontAwesome; 
 
    display: inline; 
 
    text-align: right; 
 
    padding-left: 5px; 
 
} 
 

 
/* level 1*/ 
 
#sidebar .list-group .collapse .list-group-item, 
 
#sidebar .list-group .collapsing .list-group-item { 
 
    padding-left: 20px; 
 
} 
 

 
/* level 2*/ 
 
#sidebar .list-group .collapse > .collapse .list-group-item, 
 
#sidebar .list-group .collapse > .collapsing .list-group-item { 
 
    padding-left: 30px; 
 
} 
 

 
/* level 3*/ 
 
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item { 
 
    padding-left: 40px; 
 
} 
 

 
@media (max-width:768px) { 
 
    #sidebar { 
 
     min-width: 35px; 
 
     max-width: 40px; 
 
     overflow-y: auto; 
 
     overflow-x: visible; 
 
     transition: all 0.25s ease; 
 
     transform: translateX(-45px); 
 
     position: fixed; 
 
    } 
 
    
 
    #sidebar.show { 
 
     transform: translateX(0); 
 
    } 
 

 
    #sidebar::-webkit-scrollbar{ width: 0px; } 
 
    
 
    #sidebar, #sidebar .list-group { 
 
     min-width: 35px; 
 
     overflow: visible; 
 
    } 
 
    /* overlay sub levels on small screens */ 
 
    #sidebar .list-group .collapse.show, #sidebar .list-group .collapsing { 
 
     position: relative; 
 
     z-index: 1; 
 
     width: 190px; 
 
     top: 0; 
 
    } 
 
    #sidebar .list-group > .list-group-item { 
 
     text-align: center; 
 
     padding: .75rem .5rem; 
 
    } 
 
    /* hide caret icons of top level when collapsed */ 
 
    #sidebar .list-group > .list-group-item[aria-expanded="true"]::after, 
 
    #sidebar .list-group > .list-group-item[aria-expanded="false"]::after { 
 
     display:none; 
 
    } 
 
} 
 

 
.collapse.show { 
 
    visibility: visible; 
 
} 
 
.collapsing { 
 
    visibility: visible; 
 
    height: 0; 
 
    -webkit-transition-property: height, visibility; 
 
    transition-property: height, visibility; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 
.collapsing.width { 
 
    -webkit-transition-property: width, visibility; 
 
    transition-property: width, visibility; 
 
    width: 0; 
 
    height: 100%; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 

 
.holder { 
 
    background-image: url(bg-imgZ.jpg); 
 
    height: 90vh; 
 
    background-size: cover; 
 
    margin-bottom: 15px; 
 
    /* 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    */ 
 
} 
 

 
.holder{ 
 
text-align: center; 
 
} 
 

 
.holder .content h1{ 
 
    margin-bottom: 300px; 
 
    top: 100px; 
 
    position: relative; 
 
    font-size: 65px; 
 
    color: #FFF; 
 
} 
 
.holder .arrow { 
 
    display: block; 
 
    width: 12px; 
 
    height: 9px; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 120px; 
 
    margin-left: -6px; 
 
    color: #FFF; 
 
} 
 

 
.table { 
 
    margin-left: 200px; 
 
    margin-top: 50px; 
 
} 
 
.table #head { 
 
    color: #FFF; 
 
} 
 

 
#h2 { 
 
    margin-left: 390px; 
 
    color: orange; 
 
    font-weight: bold; 
 
} 
 

 
#headertxt h1{ 
 
    margin-left: 320px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div class="holder"> 
 
      <nav class="navbar navbar-expand-sm navbar-light bg-faded"> 
 
        
 
        <!-- Brand --> 
 
        <a class="navbar-brand" href="#">Logo</a> 
 
        
 
        <!-- Links --> 
 
        <div class="collapse navbar-collapse justify-content-end" id="nav-content"> 
 
        <ul class="navbar-nav"> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" style="color:#FFB400; font-size:20px;font-weight: bold;" href="#">Mining</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Contact</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Donate</a> 
 
        </li> 
 
        </ul> 
 
        </nav> 
 
    <div class="content"> 
 
     <h1>Cryptocrea</h1> 
 
     <!--<p>-Cryptocurrentcy mining made easy!</p>--> 
 
    </div> 
 
    
 
    <a class="arrow"><img class="animated bounce" src="arrow_C.png" id="scroll"></a> 
 
    </div> 
 

 
<div class="row"> 
 
    <div class="col-md-3"> 
 
    <a href="#" data-target="#sidebar" data-toggle="collapse"><img src="toggle.png"></a> 
 
    </div> 
 
    <div class="col-md-9" id="headertxt"><h1>Crypto</h1> 
 
<table class="table"> 
 
    <thead class="thead-inverse"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 
</div> 
 

 
    </div> 
 

 
    <!-- Sidebar --> 
 
    <div class="container-fluid"> 
 
    <div class="row d-flex d-md-block flex-nowrap wrapper"> 
 
     <div class="col-md-3 float-left col-1 pl-0 pr-0 collapse width show" id="sidebar"> 
 
       <div class="list-group border-0 card text-center text-md-left"> 
 
       <a href="#menu1" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard"></i> <span class="d-none d-md-inline">Item 1</span> </a> 
 
       <div class="collapse" id="menu1"> 
 
        <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a> 
 
        <div class="collapse" id="menu1sub1"> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a> 
 
         <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a> 
 
         <div class="collapse" id="menu1sub1sub1"> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a> 
 
         </div> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a> 
 
         <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 5 e </a> 
 
         <div class="collapse" id="menu1sub1sub2"> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a> 
 
         </div> 
 
        </div> 
 
        <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a> 
 
        <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a> 
 
       </div> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a> 
 
       <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a> 
 
       <div class="collapse" id="menu3"> 
 
        <a href="#" class="list-group-item" data-parent="#menu3">3.1</a> 
 
        <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a> 
 
        <div class="collapse" id="menu3sub2"> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a> 
 
        </div> 
 
        <a href="#" class="list-group-item" data-parent="#menu3">3.3</a> 
 
       </div> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-clock-o"></i> <span class="d-none d-md-inline">Link</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-th"></i> <span class="d-none d-md-inline">Link</span></a> 
 
      
 
      </div> 
 
     </div> 
 
     
 
        
 
    </div> 
 
</div> 
 

 
<!-- Footer --> 
 
<div style="height: 2000px;"></div> 
 

 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

Answer 1

のための画像を参照してください これらの制限内の溶液を取得したいと思い あなたのHTMLはあなたが過度にクラスを使用することに熱心になっている行と列を使用してデータを画面に整理します。クラスの過剰なアプリケーションはさまざまなCSSのバグに遭遇するようになりますので、あなたが要素に適用するクラスの数をかなり低く抑えようとします（それは私の意見です）。

浮動小数点数を使用するよりもはるかに直感的な使い方であるflexboxを見てください。

フレキシボックスレイアウト（柔軟ボックス）モジュール（現在はW3Cラストコールワーキングドラフト）は、そのサイズが不明な場合でも、コンテナ内のアイテムの中のスペースを、レイアウト合わせて、配布するためのより効率的な方法を提供することを目的とおよび/または動的（したがって、「フレックス」という言葉）。

TIP：Useful Flexbox Guide

TLDR SOLUTION：

外容器にフレックス追加：

.container-fluid { 
    display: flex; 
} 

あなたがその内部で隣同士にしたいすべての項目を追加します。容器：

<div class="container-fluid"> 
    <div class="item1"> ITEM 1 CONTENT </div> 
    <div class="item2"> ITEM 2 CONTENT </div> 
</div> 

完全なソリューション：

.container-fluid { 
 
    display: flex; 
 
} 
 

 
sidebar { 
 
    overflow: hidden; 
 
    z-index: 3; 
 
} 
 
#sidebar .list-group { 
 
    min-width: 400px; 
 
    background-color: #333; 
 
    min-height: 80vh ; 
 
} 
 
#sidebar i { 
 
    margin-right: 6px; 
 
} 
 

 
#sidebar .list-group-item { 
 
    border-radius: 0; 
 
    background-color: #333; 
 
    color: #ccc; 
 
    border-left: 0; 
 
    border-right: 0; 
 
    border-color: #2c2c2c; 
 
    white-space: nowrap; 
 
} 
 

 
/* highlight active menu */ 
 
#sidebar .list-group-item:not(.collapsed) { 
 
    background-color: #222; 
 
} 
 

 
/* closed state */ 
 
#sidebar .list-group .list-group-item[aria-expanded="false"]::after { 
 
    content: " \f0d7"; 
 
    font-family: FontAwesome; 
 
    display: inline; 
 
    text-align: right; 
 
    padding-left: 5px; 
 
} 
 

 
/* open state */ 
 
#sidebar .list-group .list-group-item[aria-expanded="true"] { 
 
    background-color: #222; 
 
} 
 
#sidebar .list-group .list-group-item[aria-expanded="true"]::after { 
 
    content: " \f0da"; 
 
    font-family: FontAwesome; 
 
    display: inline; 
 
    text-align: right; 
 
    padding-left: 5px; 
 
} 
 

 
/* level 1*/ 
 
#sidebar .list-group .collapse .list-group-item, 
 
#sidebar .list-group .collapsing .list-group-item { 
 
    padding-left: 20px; 
 
} 
 

 
/* level 2*/ 
 
#sidebar .list-group .collapse > .collapse .list-group-item, 
 
#sidebar .list-group .collapse > .collapsing .list-group-item { 
 
    padding-left: 30px; 
 
} 
 

 
/* level 3*/ 
 
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item { 
 
    padding-left: 40px; 
 
} 
 

 
@media (max-width:768px) { 
 
    #sidebar { 
 
     min-width: 35px; 
 
     max-width: 40px; 
 
     overflow-y: auto; 
 
     overflow-x: visible; 
 
     transition: all 0.25s ease; 
 
     transform: translateX(-45px); 
 
     position: fixed; 
 
    } 
 
    
 
    #sidebar.show { 
 
     transform: translateX(0); 
 
    } 
 

 
    #sidebar::-webkit-scrollbar{ width: 0px; } 
 
    
 
    #sidebar, #sidebar .list-group { 
 
     min-width: 35px; 
 
     overflow: visible; 
 
    } 
 
    /* overlay sub levels on small screens */ 
 
    #sidebar .list-group .collapse.show, #sidebar .list-group .collapsing { 
 
     position: relative; 
 
     z-index: 1; 
 
     width: 190px; 
 
     top: 0; 
 
    } 
 
    #sidebar .list-group > .list-group-item { 
 
     text-align: center; 
 
     padding: .75rem .5rem; 
 
    } 
 
    /* hide caret icons of top level when collapsed */ 
 
    #sidebar .list-group > .list-group-item[aria-expanded="true"]::after, 
 
    #sidebar .list-group > .list-group-item[aria-expanded="false"]::after { 
 
     display:none; 
 
    } 
 
} 
 

 
.collapse.show { 
 
    visibility: visible; 
 
} 
 
.collapsing { 
 
    visibility: visible; 
 
    height: 0; 
 
    -webkit-transition-property: height, visibility; 
 
    transition-property: height, visibility; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 
.collapsing.width { 
 
    -webkit-transition-property: width, visibility; 
 
    transition-property: width, visibility; 
 
    width: 0; 
 
    height: 100%; 
 
    -webkit-transition-timing-function: ease-out; 
 
    transition-timing-function: ease-out; 
 
} 
 

 
.holder { 
 
    background-image: url(bg-imgZ.jpg); 
 
    height: 90vh; 
 
    background-size: cover; 
 
    margin-bottom: 15px; 
 
    /* 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    */ 
 
} 
 

 
.holder{ 
 
text-align: center; 
 
} 
 

 
.holder .content h1{ 
 
    margin-bottom: 300px; 
 
    top: 100px; 
 
    position: relative; 
 
    font-size: 65px; 
 
    color: #FFF; 
 
} 
 
.holder .arrow { 
 
    display: block; 
 
    width: 12px; 
 
    height: 9px; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 120px; 
 
    margin-left: -6px; 
 
    color: #FFF; 
 
} 
 

 
.table { 
 
    margin-left: 200px; 
 
    margin-top: 50px; 
 
} 
 
.table #head { 
 
    color: #FFF; 
 
} 
 

 
#h2 { 
 
    margin-left: 390px; 
 
    color: orange; 
 
    font-weight: bold; 
 
} 
 

 
#headertxt h1{ 
 
    margin-left: 320px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div class="holder"> 
 
      <nav class="navbar navbar-expand-sm navbar-light bg-faded"> 
 
        
 
        <!-- Brand --> 
 
        <a class="navbar-brand" href="#">Logo</a> 
 
        
 
        <!-- Links --> 
 
        <div class="collapse navbar-collapse justify-content-end" id="nav-content"> 
 
        <ul class="navbar-nav"> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" style="color:#FFB400; font-size:20px;font-weight: bold;" href="#">Mining</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Contact</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Donate</a> 
 
        </li> 
 
        </ul> 
 
        </nav> 
 
    <div class="content"> 
 
     <h1>Cryptocrea</h1> 
 
     <!--<p>-Cryptocurrentcy mining made easy!</p>--> 
 
    </div> 
 
    
 
    <a class="arrow"><img class="animated bounce" src="arrow_C.png" id="scroll"></a> 
 
    </div> 
 

 
    <!-- Sidebar --> 
 
    <div class="container-fluid"> 
 
    <div class="row d-flex d-md-block flex-nowrap wrapper"> 
 
     <div class="col-md-3 float-left col-1 pl-0 pr-0 collapse width show" id="sidebar"> 
 
       <div class="list-group border-0 card text-center text-md-left"> 
 
       <a href="#menu1" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard"></i> <span class="d-none d-md-inline">Item 1</span> </a> 
 
       <div class="collapse" id="menu1"> 
 
        <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a> 
 
        <div class="collapse" id="menu1sub1"> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 1 a</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 2 b</a> 
 
         <a href="#menu1sub1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 3 c </a> 
 
         <div class="collapse" id="menu1sub1sub1"> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.1</a> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub1">Subitem 3 c.2</a> 
 
         </div> 
 
         <a href="#" class="list-group-item" data-parent="#menu1sub1">Subitem 4 d</a> 
 
         <a href="#menu1sub1sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 5 e </a> 
 
         <div class="collapse" id="menu1sub1sub2"> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.1</a> 
 
          <a href="#" class="list-group-item" data-parent="#menu1sub1sub2">Subitem 5 e.2</a> 
 
         </div> 
 
        </div> 
 
        <a href="#" class="list-group-item" data-parent="#menu1">Subitem 2</a> 
 
        <a href="#" class="list-group-item" data-parent="#menu1">Subitem 3</a> 
 
       </div> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a> 
 
       <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a> 
 
       <div class="collapse" id="menu3"> 
 
        <a href="#" class="list-group-item" data-parent="#menu3">3.1</a> 
 
        <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a> 
 
        <div class="collapse" id="menu3sub2"> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a> 
 
         <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a> 
 
        </div> 
 
        <a href="#" class="list-group-item" data-parent="#menu3">3.3</a> 
 
       </div> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-clock-o"></i> <span class="d-none d-md-inline">Link</span></a> 
 
       <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-th"></i> <span class="d-none d-md-inline">Link</span></a> 
 
      
 
      </div> 
 
     </div>   
 
    </div> 
 
    <div id="headertxt"><h1>Crypto</h1> 
 
<table class="table"> 
 
    <thead class="thead-inverse"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table"> 
 
    <thead class="thead-default"> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">1</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">2</th> 
 
     <td>Jacob</td> 
 
     <td>Thornton</td> 
 
     <td>@fat</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row">3</th> 
 
     <td>Larry</td> 
 
     <td>the Bird</td> 
 
     <td>@twitter</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 

 
<!-- Footer --> 
 
<div style="height: 2000px;"></div> 
 

 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

このソリューションは、あなたが探していたものだったホープ！

PS：コードをインラインに保ち、すべてのタグを一致させるには、IDEでHTMLをコーディングすることが必要です。あなたがそれを使用していない場合はSublimeを見てください