我正在使用Vistual Studio 2012和Bootstrap 3（cosmo-bootstrap主题）来设置我的页面样式。浏览器最大化时页面工作正常;但是，如果页面恢复到一定的大小，我就无法在输入文本框中输入内容。还有其他人有这个问题吗？我该怎么做才能解决这个问题？ 下面是我的布局页面之一。
<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head>
<title>@ViewBag.Title</title>
<link href="../../Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../Content/cosmo-boostrap.min.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
</head>
<body>
@* <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>*@
<div id="status">
</div>
</div>
<div id="page">
<header class="container">
<div id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="logo" id="logo" class="col-md-6 col-md-offset-6 col-sm-7 col-sm-offset-5 col-xs-8 col-xs-offset-4">
<img src="../../Images/logo.png" alt="THE BOOK UP" class="image-responsive" /> @Html.ActionLink(SessionWrapper.Student.FirstName +" "+ SessionWrapper.Student.LastName ,"UserProfile","Student", null, new {id = SessionWrapper.Student.UserId})
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="ListBook" class= "nav">
@* @Html.ActionLink("List Books", "ListBook", "Student")*@
<label class="btn btn-primary" onclick="location.href='@Url.Action("ListBook", "Student")'">List Books</label>
</li>
<li id="FindBook" class="nav">
@* @Html.ActionLink("Find Books", "FindBook", "Student")*@
<label class="btn btn-primary" onclick="location.href='@Url.Action("FindBook", "Student")'">Find Books</label>
</li>
<li id= "index" class="nav">
@* @Html.ActionLink("Add Books", "AddBook", "Student")*@
<label class="btn btn-primary" onclick="location.href='@Url.Action("AddBook", "Student")'">Add Book</label>
</li>
<li id="addUser" class="nav">
<label class="btn btn-primary" onclick="location.href='@Url.Action("AddUser","Home")'">Add User</label>
</li>
<li id="Logoff" class="nav">
@* @Html.ActionLink("Log Off", "LogOff", "Account", new { onclick="logOut()" })*@
<label class="btn btn-primary" onclick="logOut(1)">Log out</label>
</li>
</ul>
</div>
</div>
</header>
<section id="body" class="container">
<section id="main" class="col-md-10 col-sm-10 col-xs-12">
@RenderBody()
</section>
<section id="sidebar" class="col-md-2 col-sm-2">
<table style="background-color: black;">
<tr>
<td style="width: 150px; height: 150px;">
<div id="AddCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-wrap="true">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../../Images/adds/Desert.jpg" id="pic1" alt="Desert" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/koala.png" id="pic2" alt="Koala" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Koala</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/Jellyfish.jpg" id="pic3" alt="Jelly Fish" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Jelly Fish</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/Tulips.jpg" id="pic4" alt="Tulips" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Tulips</h3>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 150px; height: 150px;">
<div id="AddCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-wrap="true">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="../../Images/adds/Desert.jpg" id="pic1" alt="Desert" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Desert</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/koala.png" id="pic2" alt="Koala" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Koala</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/Jellyfish.jpg" id="pic3" alt="Jelly Fish" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Jelly Fish</h3>
</div>
</div>
<div class="item">
<img src="../../Images/adds/Tulips.jpg" id="pic4" alt="Tulips" class="thumbnail image-responsive">
<div class="carousel-caption">
<h3>Tulips</h3>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</section>
</section>
<hr />
<footer class="container">
<p>© of K&M Systems Solution <a href="www.k&m.com">K&M</a>. </p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@* <script data-main="scripts/js/mbtest" src="~/Scripts/js/require.js"></script>*@
<script src="../../Scripts/js/bootstrap.min.js"></script>
<script src="../../Scripts/js/site.js"></script>
</body>
</html>
<script>
$('#pic1').attr("src", '../../Images/adds/koala.png');
//$('.carousel').carousel({
// interval: 3000
//});
@* window.fbAsyncInit = function () {
FB.init({
appId: '296813847191603',
xfbml: true,
version: 'v2.1'
});
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
};
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));*@
function logOut(e) {
@* window.fbAsyncInit = function () {
alert('init');
FB.init({
appId: '296813847191603',
xfbml: true,
version: 'v2.1'
});
};
if (typeof FB.logout == 'function') {
if (FB.getAuthResponse()) {
FB.logout(function (response) { location.href = '@Url.Action("LogOff", "Account")'; });
return;
}
} else {
location.href = '@Url.Action("LogOff", "Account")';
return;
}*@
if (e == 1) {
location.href = '@Url.Action("LogOff", "Account")';
}
}
</script>
答案 0 :(得分：1)
问题是我的补充工具栏正在接管主要表格。在我的css文件中，我添加了下面显示的行;问题是固定的。
#sidebar
{
overflow: hidden;
}