Question

我使用的是Bootstrap 3.1.1，我的登录页面在768px下没有响应。页面正在破碎，如图所示：

我做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title>MY Site</title>
    <link href="~/favicon.ico?v=2" rel="shortcut icon" type="image/x-icon" />
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <meta content='text/html;charset=utf-8' http-equiv='content-type'>
    <meta content='Saúde Inteligente Móvel' name='description'>
    <link href='~/favicon.ico?v=2' rel='shortcut icon' type='image/x-icon'>
    <link href='~/assets/images/meta_icons/apple-touch-icon.png' rel='apple-touch-icon-precomposed'>
    <link href='~/assets/images/meta_icons/apple-touch-icon-57x57.png' rel='apple-touch-icon-precomposed' sizes='57x57'>
    <link href='~/assets/images/meta_icons/apple-touch-icon-72x72.png' rel='apple-touch-icon-precomposed' sizes='72x72'>
    <link href='~/assets/images/meta_icons/apple-touch-icon-114x114.png' rel='apple-touch-icon-precomposed' sizes='114x114'>
    <link href='~/assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-precomposed' sizes='144x144'>
    <!-- / START - page related stylesheets [optional] -->

    <!-- / END - page related stylesheets [optional] -->
    <!-- / bootstrap [required] -->
    <link href="~/Content/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
    <!-- / theme file [required] -->
    <link href="~/Content/light-theme.css" media="all" id="color-settings-body-color" rel="stylesheet" type="text/css" />
    <!-- / coloring file [optional] (if you are going to use custom contrast color) -->
    <link href="~/Content/theme-colors.css" media="all" rel="stylesheet" type="text/css" />

    <!--[if lt IE 9]>
      <script src="assets/javascripts/ie/html5shiv.js" type="text/javascript"></script>
      <script src="assets/javascripts/ie/respond.min.js" type="text/javascript"></script>
    <![endif]-->

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    @Styles.Render("~/Content/themes/base/css")
    @Styles.Render("~/Content/site-css")
    @Scripts.Render("~/bundles/libs/modernizr")

</head>
<body class='contrast-blue login contrast-background'>
    <div class='middle-container' style="display: none" data-bind="visible: true">
        <div class='middle-row'>
            <div class='middle-wrapper'>
                <div class='login-container-header'>
                    <div class='container'>
                        <div class='row'>
                            <div class='col-sm-12'>
                                <div class='text-center'>
                                    <h1 class="text-primary"><img src="~/Images/logo-sim.png" height="160" width="225" /></h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='login-container'>
                    <div class='container'>
                        <div class='row' data-bind="validationOptions: {
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    parseInputAttributes: true
}">
                            <div class='col-sm-4 col-sm-offset-4'>
                                <h1 class="text-center">


                                </h1>
                                <div class="row">
                                    <div class='col-sm-12'>
                                        <div class="validation-summary" data-bind="visible: model().isAnyMessageShown()">
                                            <ul>
                                                <li data-bind="validationMessage: model().Email"></li>
                                                <li data-bind="validationMessage: model().Senha"></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <form>
                                    <div class='form-group'>
                                        <div class='controls with-icon-over-input'>
                                            <input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
                                            <i class='icon-user text-muted'></i>
                                        </div>
                                    </div>
                                    <div class='form-group'>
                                        <div class='controls with-icon-over-input'>
                                            <input value="" placeholder="Senha" class="form-control" data-bind="value: model().Senha" name="password" type="password" />
                                            <i class='icon-lock text-muted'></i>
                                        </div>
                                    </div>
                                    <div class='checkbox'>
                                        <label for='remember_me'>
                                            <input id='remember_me' name='remember_me' type='checkbox' data-bind="checked: model().CookiePersistente">
                                            Lembrar de mim
                                        </label>
                                    </div>
                                    <button class='btn btn-block' data-bind="click: submit">Entrar</button>
                                </form>
                                <div class='text-center'>
                                    <hr class='hr-normal'>
                                    @Html.ActionLink("Esqueceu sua senha?", "EsqueciSenha", "Login")
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='login-container-footer'>
                    <div class='container'>
                        <div class='row'>
                            <div class='col-sm-12'>
                                <div class='text-center'>
                                    <img src="~/Images/logo-rodape.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Scripts.Render("~/bundles/libs/jquery")
    @Scripts.Render("~/bundles/libs/base")
    <script type="text/javascript">
        RouteUtility.rootPath = '@Url.Action("Index", "Home")';
    </script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/pages/login.js")"></script>
</body>
</html>

修改

按照建议添加col-xs- *后，会发生奇怪的行为。当我添加col-xs- *时，这些字段仅适用于768px及以上。如果它低于768px，它们将会增长!! 完全相反！如何解决这个问题？

在768px下：http://postimg.org/image/d0zcna7bf/

768px及以上：http://postimg.org/image/56isu0qtt/

Answer 1

您可以控制添加xs设备的宽度，例如col-xs-6：

<div class='form-group'>
      <div class='controls with-icon-over-input col-xs-6'>
          <input value="" placeholder="E-mail" class="form-control" data-bind="value: model().Email" name="email" type="email" />
           <i class='icon-user text-muted'></i>
       </div>
</div>

Answer 2

thiago 你好。

在您的代码中查看行号 60 ... ... <div class='col-sm-4 col-sm-offset-4'>

当您的屏幕尺寸达到此断点时，它将扩展到100％宽度，因为您不在此处控制/使用 col-xs-XX 类。
如果你把它添加到你的代码中这样...
<div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>
对于 60 行周围的代码行并调整窗口大小，您将看到您有控制权。

您使用它的这行代码用于包装Form块，以设置此Form的宽度你只需要在所有断点处控制它。

希望这有帮助。

添加到此
这是我调整大小时得到的使用... <div class='col-sm-4 col-sm-offset-4 col-xs-8 col-xs-offset-2'>

Bootstrap页面中断，在768px下无响应

2 个答案: