10
当我的屏幕宽度减小到小于最小宽度时，我的表格能够显示，而不是在table-responsive包装上获得水平滚动条，这会增加整个网站的宽度。我尝试了所有我遇到过的SO解决方案，但都没有运气。Bootstrap 3表格响应不起作用。 X滚动条出现在整个网站上而不是表格
我怀疑这与我的柔性箱造型有关。基本上，我已经对我的网站进行了样式设计，以便我的主页内容部分（位于<div id="aspnet-placeholder-content" class="container"></div>之内）将在考虑到页脚和粘滞标题后占用视口的剩余高度。到目前为止，除此之外，我没有任何问题。
如何阻止表格扩大我的网站宽度？如果你不喜欢SO的内置片段功能，编辑：Here's a JSFiddle。
$(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>
这就造成内_vertical_滚动我'＃aspnet-placeholder-content' div，它会导致'.container'样式o被忽略，占用页面宽度的100％。这并没有解决我的问题，并介绍了两个新的问题。 –
iv'e编辑答案 - 希望我有帮助！ –