Question

我讨厌CSS以及所有关于它的事情，我认为这对于经验丰富的开发人员来说很麻烦。

我的表单有2个字段，代码如下：

<body class="container">
        <div class="row">
              <div class="col-md-offset-4 col-md-4">
                  <form ng-submit="logIn(user)" class="ng-pristine ng-valid">
                      <div class="login-form">
                          <div class="form-group">
                              <input type="email" class="input form-control login-field ng-pristine ng-valid ng-valid-email" placeholder="E-posta" ng-model="user.email">
                              <label class="login-field-icon fui-user"></label>
                          </div>
                          <div class="form-group">
                              <input type="password" class="input form-control login-field ng-pristine ng-valid" placeholder="Parola" ng-model="user.password">
                              <label class="login-field-icon fui-lock"></label>
                          </div>
                      </div>
                  </form>
              </div>
          </div>
  </body>

这是我的<head>标记

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="custom.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>

当我检查时，我看到从浏览器中正确调用了所有文件，问题与此无关。

结果形成了我期望的元素风格：

但我明白这一点：

表单未调整大小。为什么呢？

提前致谢。

Answer 1

怀疑您错过了html head中的viewport声明

<head>
   ...
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

查看基本的Bootstrap template，了解您需要的一切。

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1">

仅当某个条件为真时，它才会使用@media规则包含一个CSS属性块。

/ *超小型设备（手机，小于768px） / / 没有媒体查询，因为这是Bootstrap * /

中的默认值

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }



@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

查看此链接Media Query

Bootstrap 3 Mobile Forms自动调整大小不起作用

2 个答案: