0

其他人已经问过这个问题，我尝试了那里的建议，但没有成功。关联

所以这是我的问题，我使用 Bootstrap 3 创建了一个简单的登录页面，它在除 IE8 之外的所有浏览器中都能正常工作，整个页面在 IE8 中延伸到全宽。另一个问题是，所有浏览器的页面底部都会出现滚动条。滚动条问题截图http://i42.tinypic.com/sqgh82.png

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap 3</title>

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" type="text/css">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>

<style>
body{
    background-color:#f2f2f2;
}
</style>

</head>

<body>


<div class="row">

<div id="login_panel_alerts" class="col-lg-4 center">
    <div class="alert alert-danger">Something went wrong!<button type="button" class="close" data-dismiss="alert">&times;</button></div>
    <div class="alert alert-success">Success!</div>
</div>

    <div id="login_panel" class="col-lg-3 center modal-content">

    <form>
    <fieldset>
        <legend>Login</legend>

        <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control form-inline" placeholder="Enter username">
        </div>

        <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter password">
        </div>

        <div class="form-group">
        <button type="button" class="btn btn-primary">Login</button>
        <button type="button" class="btn btn-default">Reset</button>
        <button type="button" class="btn btn-link">Forgot password?</button>
        </div>


    </fieldset>
    </form>

    </div><!--login_panel-->

</div>


</body>
</html>
4

3 回答 3

0

您是否尝试在 css 中为滚动条问题提供相对宽度而不是绝对宽度？

这是一篇很好的文章。

于 2013-08-21T05:22:24.980 回答
0 
<style>
body
{
    background-color:#f2f2f2;
    overflow-x:  hidden;
}
.center
{
    float: none; 
    margin-left: auto;
    margin-right: auto;
}
</style>

尝试这个。

于 2013-08-21T05:25:26.770 回答
0

是的，您应该尝试将您的课程换成较低版本的课程

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript">
    $(".col-lg-3).addClass("col-md-3").addClass("col-xs-3");
    $(".col-lg-4).addClass("col-md-4").addClass("col-xs-4");
</script>
<![endif]-->

我做了类似的事情，但我从 col-md-10 更改为 col-md-9。我理解它的方式是屏幕缩小超过某个像素宽度（我相信@media包含这个值）col-lg-4下降到col-md-8然后到col-xs-12，但是如果你指定了什么您希望它的宽度随着屏幕变小而与屏幕相关。您应该看到您的元素的外观大致相同。

于 2014-03-31T19:00:03.953 回答