Question

我创建了一个当前适合屏幕整个宽度的登录表单。我试图通过使用宽度来缩小表单宽度：50％，这样可以完美地调整表单大小但使表单粘在屏幕的左侧。如何在保持中心和响应的同时更改表单大小？是否只有一个我不知道的属性？

html,
body {
  height:100%;
  font-family: 'Alegreya Sans', sans-serif;
}

#header {
  background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero.jpeg') center center no-repeat;
  background-size:cover;
  height:100%;
  color:white;
  display:flex;
  align-items:center;
}

#header h1 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 500%;
  font-weight: 300;
}

#header h3 {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 200%;
  font-weight: 100;
}

.login {
  background-color:rgba(0,0,0,0.5);
  padding:30px;
  border-radius:10px;
}

<section id="header">
  <div class="col-sm-12 login">
    <h1>Apple ID</h1>
    <h3>Manage your Apple account</h3>
    <form>
      <fieldset class="form-group">
        <label class="sr-only">Apple ID</label>
        <input type="email" class="form-control" placeholder="Apple ID">
      </fieldset>
      <fieldset class="form-group">
        <label class="sr-only">Password</label>
        <input type="password" class="form-control" placeholder="Password">
      </fieldset>
      <button type="submit" class="btn btn-outline-info btn-block">login</button>
    </form>
  </div>
</section>

Answer 1

试试这个

<强> demo

<强> CSS

html,
        body {
            height:100%;
            font-family: 'Alegreya Sans', sans-serif;
        }

        #header {
            background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/hero.jpeg') center center no-repeat;
            background-size:cover;
           /* height:100%;*/
            color:white;
            display:flex;
            align-items:center;
        }

        #header h1 {
            text-align: center;
            font-family: 'Raleway', sans-serif;
            font-size: 500%;
            font-weight: 300;
        }

        #header h3 {
            text-align: center;
            font-family: 'Raleway', sans-serif;
            font-size: 200%;
            font-weight: 100;
        }

        .login {
            background-color:rgba(0,0,0,0.5);
            padding:30px;
            border-radius:10px;
            margin:0 auto;
        }

Answer 2

按类名称，看起来你正在使用bootstrap作为你的框架。

<div class="col-sm-12 login">将登录表单设置为屏幕的整个宽度（bootstrap适用于12的网格系统）

将div类更改为<div class="col-sm-6 col-sm-offset-3 login">，这将创建一个6列宽（容器宽度的50％）的登录表单，从左侧偏移3列（容器宽度的25％））。调整这些值以适应。

Answer 3

您使用bootstrap的网格，并在此处将col数字设置为12： <div class="col-sm-12 login">，它使网格系统的div宽度达到全宽。如果您希望它是半宽，则应将class="col-sm-6"设置为6。

Answer 4

使用twitter bootstrap将表单居中

<form class="center-block col-sm-6 col-sm-offset-3 col-xs-12">

Answer 5

您可以根据屏幕宽度使用Bootstrap的Grid类。

这样做：

<div class="login col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3">

而不是：

<div class="col-sm-12 login">

您可以查看Bootstrap Grids。希望这有帮助！

如何使登录表单不适合整个屏幕宽度

5 个答案: