当我的屏幕宽度减小到小于我的表格能够显示的最小宽度时，而不是在 table-responsive 上获得水平滚动条包装器，它增加了我整个网站的宽度。我已经尝试了我遇到的每一个 SO 解决方案，但没有成功。
我怀疑这与我的 flexbox 样式有关。基本上，我已经设计了我的网站样式，以便我的主页内容部分(位于 <div id="aspnet-placeholder-content" class="container"></div> 内)将在考虑页脚和粘性页眉后占据视口(viewport)的剩余高度。到目前为止，除了这个问题，我没有遇到任何问题。
如何阻止表格扩展我网站的宽度？
编辑:Here's a JSFiddle如果您不喜欢 SO 的内置代码段功能。
$(document).ready(function() {
$("a").on("click", function(e) {
e.preventDefault();
})
$("form").on("submit", function(e) {
e.preventDefault();
})
});body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
form.page-wrapper {
padding: 51px 0 0;
position: static;
height: 100%;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section#body-content {
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section#body-content #subheader {
background: #7e5bbd;
padding-top: 35px;
padding-bottom: 35px;
}
#aspnet-placeholder-content {
flex: 1 0 auto;
}
footer {
background: url("https://s25.postimg.org/4ylsw3w0v/brushed-metal-horizontal-darker-450.jpg") center top;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 20px;
}
@media (min-width: 768px) {
footer .footer-content div:first-child {
text-align: right;
border-right: 1px solid #868686;
}
footer .footer-content div:nth-child(2) {
text-align: left;
border-left: 1px solid #868686;
}
}
footer h5 {
color: #868686;
}
@media (max-width: 767px) {
.padding-left-none-sm,
.padding-right-none-sm {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.padding-left-none-sm {
padding-left: 0;
}
.padding-right-none-sm {
padding-right: 0;
}
.text-right-sm {
text-align: right;
}
.text-left-sm {
text-align: left;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form class="page-wrapper">
<header class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Logo</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="liHome"><a href="/">Home</a></li>
<li class="dropdown" id="liService">
<a href="/" data-toggle="dropdown" class="dropdown-toggle">Service <i style="font-size:x-small; opacity:0.4;" class="fa fa-chevron-down" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="/">Create Ticket</a></li>
<li><a href="/">View Tickets</a></li>
</ul>
</li>
<li id="liProposals">
<a href="/">Proposals</a>
</li>
<li id="liProjects">
<a href="/">Projects</a>
</li>
<li id="liDocuments">
<a href="/">Documents</a>
</li>
</ul>
</div>
</div>
</header>
<section id="body-content">
<div id="subheader">
<div class="container">
<div class="col-sm-2 col-sm-push-10 padding-right-none-sm" style="text-align: right;">
<button type="submit" class="btn btn-secondary" id="btnLogout"><strong>Sign out</strong></button>
</div>
<div class="col-sm-5 col-sm-pull-2 padding-left-none-sm">
<div class="button-group">
<select id="ddlLocations" class="form-control">
<option selected="selected" value="0">(select option)</option>
<option value="7889">Option 1</option>
<option value="8736">Option 2</option>
<option value="10398">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div id="aspnet-placeholder-content" class="container">
<!--This is where page-specific server-generated content from ASP.NET will render-->
<h3>Page Title</h3>
<br>
<div style="overflow-x: auto">
<table id="tblLocs" class="table table-striped">
<tbody>
<tr>
<th>System</th>
<th>Location Type</th>
<th>Location</th>
<th style="text-align: center;">Wired</th>
<th style="text-align: center;">Equipped</th>
<th style="text-align: center;">Programmed</th>
<th style="text-align: center;">Tested</th>
</tr>
<tr>
<td>Access Control</td>
<td>Computer Station</td>
<td>2nd Floor IT Room</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Security Office</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td>Badging Station</td>
<td>Security Desk</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td>Panel Location</td>
<td>1st Floor Comm and Data Room</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>IT Closet</td>
<td style="text-align:center;"><i class="fa fa-check-square-o" title="Task complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
<td style="text-align:center;"><i class="fa fa-square-o" title="Task not yet complete"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row text-center footer-content">
<div class="col-sm-6">
<h5>Footer text</h5>
</div>
<div class="col-sm-6">
<h5>Copyright stuff</h5>
</div>
</div>
</div>
</footer>
</form>
</body>最佳答案
感谢所有提供解决方案的人。所有这些似乎都涉及将包装器的宽度设置为 100%，如下所示:
#aspnet-placeholder-content {
flex: 1 0 auto;
width: 100%;
}
问题是，这使 .container Bootstrap 样式无效，该样式根据视口(viewport)大小设置以像素为单位的硬编码宽度。我不想要整页宽度的内容，所以我添加了一个类似于 .container 的新类，但使用 max-width 而不是 width:
.container-max {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.container-max {
max-width: 750px;
}
}
@media (min-width: 992px) {
.container-max {
max-width: 970px;
}
}
@media (min-width: 1200px) {
.container-max {
max-width: 1170px;
}
}
现在我的包装器使用这个新类而不是 .container，并且在包装器上设置 width: 100% 将达到预期的效果。
<div id="aspnet-placeholder-content" class="container-max">
关于html - Bootstrap 3 表格响应不起作用。 X 滚动条出现在整个网站而不是表格上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44182232/