引导响应设置不起作用

Question

我正在尝试创建一个响应式的用户登录页面。我在 Angular 5 中执行此操作。在全屏显示时，一切正常。

但是当我减小浏览器的大小时，似乎响应方面不起作用

我为 HTML 和 SCSS 文件添加了以下信息。 我究竟做错了什么？ TIA

$ ng -v
Angular CLI: 1.6.1
Node: 8.9.4
OS: win32 x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.23
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.13
typescript: 2.4.2
webpack: 3.10.0

admin-login.component.html

<div class="container">
  <div class="row">
    <div class="Absolute-Center is-Responsive ">
      <form (submit)="loginUser($event)">
        <div class="input" >
          <label>Username</label>
          <input class="btn-block" type="text">
        </div>
        <div class="input">
          <label>Password</label>
          <input class="btn-block" type="password">
        </div>
        <br/>
        <div class="input"> 
          <input class="btn btn-success btn-lg btn-primary btn-block btn-signin" type="submit" value="Login">
        </div>
      </form>
      <br/>
      <div>
        <a href="#" class="forgot-password float-left" style="font-size:20px">
          Forgot Password
        </a>
        <a href="#" class="forgot-password float-right" style="font-size:20px">
          Register
        </a>
      </div>
    </div>
  </div>
</div>

admin-login.component.scss

:host {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}


div.input {
    position: relative;
}

div.input label {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 10px;
    background: white;
    font-size: 20px;
    padding: 5px 2px;
}

div.input input {
    padding: 10px 15px;
    font-size: 25px;
    outline: 0;
}

div.input {
    margin-top: 20px;
}


.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  }

  .Absolute-Center.is-Responsive {
    width: 50%; 
    height: 50%;
    min-width: 200px;
    max-width: 400px;
    padding: 40px;
  }

更新

@WebDevBooster - 非常感谢您的意见！我在这里关注了信息：https://getbootstrap.com/docs/4.0/layout/grid/ 并专注于讲述如何模拟居中表格的部分。现在我的问题解决了。

Answer 1

它不起作用的原因是您没有使用列。所有内容都必须放入位于一行内的列中。永远不要直接进入.row。

这是因为 Bootstrap 的行和列旨在协同工作。永远不要只使用一个而没有另一个。

请注意，在下面的示例中使用.col 意味着无论屏幕大小如何，该列都是全宽的。为了使其更具响应性，您需要根据需要添加响应列类。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <div class="Absolute-Center is-Responsive ">
                <form (submit)="loginUser($event)">
                    <div class="input" >
                        <label>Username</label>
                        <input class="btn-block" type="text">
                    </div>
                    <div class="input">
                        <label>Password</label>
                        <input class="btn-block" type="password">
                    </div>
                    <br/>
                    <div class="input"> 
                        <input class="btn btn-success btn-lg btn-primary btn-block btn-signin" type="submit" value="Login">
                    </div>
                </form>
                <br/>
                <div>
                    <a href="#" class="forgot-password float-left" style="font-size:20px">
                        Forgot Password
                    </a>
                    <a href="#" class="forgot-password float-right" style="font-size:20px">
                        Register
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

也可以将内容直接放入.container，即不使用行和列。但是，这不会响应。一旦您使用.row，您必须在该行中至少使用一个.col。并将您的所有内容放在该列中。