【发布时间】：2020-06-18 12:41:27
【问题描述】：
如何扩展顶部面板（标记为红色）以覆盖整个页面宽度（标记为绿色）？ 所有的宽度都必须相同。
第二个也是类似的问题。 我需要在 bootom 添加第 7 个表。怎么做，让它们的宽度都一样？
在线演示：bootply
我的代码在这里：
<div class="container-full">
<div class="row clearfix">
<div class="col-md-3 column well">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-9 column">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
</div>
<div class="row clearfix">
<div class="col-md-1 column">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
<div class="col-md-1 column">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-2 column">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2 column">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="active">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="success">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="danger">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
标签： html css twitter-bootstrap twitter-bootstrap-3