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

管理-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>

管理-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。并将所有内容放在该列中。

Bootstrap响应设置无效

1 个答案: