html - 引导表插入侧面菜单并获得字宽

我的问题是，我无法使表格和侧面菜单在引导程序列中正常显示，如图所示。我尝试了一些不同的方法，但是没有任何帮助。我希望表格和侧面菜单能够响应，并且我不明白为什么表格会将其他内容推开。
我希望表格填充7列，而侧面菜单填充3列。

希望您能提供帮助！

Image

.vertical-menu {
    font-family: 'Roboto';
}

.vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}

.vertical-menu a:hover {
    background-color: #ccc;
}

.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
}

#coin{
	 text-align: center;
	 background-color: #343434;
	 color: #FFF;
	 padding: 10px;
	 margin: 0;
	 border-top-right-radius: 12px;
	 font-family: 'Roboto';


}

.main {
	display:inline-block;
	height: auto;
}

.content {
	}

.table {
	width: 800px;
}

.main h3 {
	margin-left: 390px;
	font-family: 'Roboto';
	margin-top: 40px;
}

<div class="main">
	<div class="row">
		<div class="col-md-3">

<div class="vertical-menu" >
	<h5 id="coin">Coins</h5>
  <a href="#" class="active">BTC</a>
  <a href="#">BitC</a>
  <a href="#">Eth</a>
  <a href="#">LightC</a>
  <a href="#">iota</a>
  <a href="#">ripple</a>
  <a href="#">Verge</a>
  <a href="#">Cardano</a>
  <a href="#">NEM</a>
  <a href="#">TRON</a>
  <a href="#">Dash</a>
  <a href="#">EOS</a>
  <a href="#">NEO</a>
  <a href="#">Monero</a>
  <a href="#">Qtum</a>
</div>
</div>
<div class="col-md-9">
<h3>Bitcoin</h3>


<table class="table table-hover table-responsive">
  <thead>
    <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>

最佳答案

将其包装在具有类表响应的div中

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>