CSS不适用于AngularJS注入的HTML [重复]

Question

我对AngularJS并不陌生，正在尝试构建一个简单的登录页面。之前，我在index.html中使用了CSS和HTML，而在app.js中使用了我的angular js代码。 CSS在头部分用'style'标签定义，我的表单在正文部分，并且角度代码作为脚本包含在内。表单已按我的意愿显示，并出现在屏幕中间。我也将bootstrap.css包含为样式表。

然后我将CSS（styles.css），HTML（index.html）和angularjs（app.js）分成三个文件，并尝试使用routeProvider将它们粘合在一起。但是，似乎我定义的.wrapper CSS类不再适用于我的表单，现在该表单显示在屏幕顶部。让我感到困惑的是，Bootstrap CSS仍然可以正常工作。

styles.css和app.js都包含在HTML中，并且HTML表单是通过routeProvider注入的。

我不确定我要去哪里错了；快速f12表示存在样式，但是CSS并未显示我想要的样式。

这是我的styles.css：

html {
  height:100%
}
body {
  height: 100%;
  background-image: url('images/calm-background.jpg');
  background-size: 100% 100%;
}
.wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-f-border {
  border-style: ridge;
  background-color: white;
  padding-bottom: 15px;
  border-radius: 5px;
}

这是我的form.html：

<div ng-app="app">
  <div class="wrapper">
    <div class="container">
      <div class="row center-block">
        <div class="col-sm-4">
          <!-- Empty div for centering purposes -->
        </div>
        <div class="col-sm-4 form-f-border">
          <div class="text-center">
            <h2>Log In</h2>
          </div>
          <form>
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username-input">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password-input">
            </div>
            <div class="text-center">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
        <div class="col-sm-4">
          <!-- Empty div for centering purposes -->
        </div>
      </div>
    </div>
  </div>
</div>

这是我的app.js：

var app = angular.module('app', [
  'ngRoute'
]);

app.config(function($routeProvider) {
  $routeProvider
    .when( '/', {
      templateUrl: 'form.html',
      controller: 'formController',
    })
    .otherwise({
      redirectTo: '/'
    });
});

app.controller('formController', function($scope) {

});

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="styles.css">
    <script src="angular/angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-app="app">
      <ng-view></ng-view>
    </div>
  </body>
</html>

这是当前页面的外观：

我希望将表单返回到屏幕中间，它属于该窗口。

任何帮助将不胜感激。非常感谢。

Answer 1

好像我从另一个帖子中找到了答案：Set div height equal to screen size

结果是我需要将100％更改为100vh，这会使用当前视图的100％。

CSS不适用于AngularJS注入的HTML [重复]

问题描述投票：0回答：1

1个回答

最新问题

CSS不适用于AngularJS注入的HTML [重复]

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1