html - Bootstrap 表推送侧边菜单并获取字宽

Question

我的问题是我无法让表格和侧边菜单在 Bootstrap 列中正常运行，如图所示。我尝试了一些不同的东西，但没有任何帮助。我希望表格和侧边菜单能够响应，但我不明白为什么表格会把其他内容推开。 我希望表格填充 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>

Answer 1

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

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