如何使用 Bootstrap Forms 减少 Devise 上的输入列宽

Question

我是一名新编码员，并在 RAILS 上使用 Devise 注册身份验证 gem。我正在尝试自定义注册表单的输入列。我想缩短列宽，因为它们在页面上看起来太宽了。（从左到右）

见图片。 enter image description here

请问我可以在我的代码中添加什么来实现这一点。

<div class="form-group">
  <%= f.label :email %>
  <%= f.email_field :email, autofocus: true, class: "form-control" %>
</div>

<div class="form-group">
    <%= f.label :password %>
    <%= f.password_field :password, class: "form-control" %>
</div>

<div class="form-group">
    <%= f.label :password_confirmation %>
    <%= f.password_field :password_confirmation, class: "form-control" %>
</div>

<div class="form-group">
    <%= f.submit "Sign up", class: "btn btn-primary" %>
</div>

Answer 1

您需要将表单包装到某个容器中，该容器不会跨越所有可用宽度。阅读Bootstrap's grid system。 Bootstrap 使用 12 列网格，因此，例如，如果您希望表单采用页面宽度的 1/3，则需要将其包装成 <div class="col-md-4"></div>（因为 12 / 3 = 4）。

当然，我相信这样的事情应该可行：http://codepen.io/anon/pen/vNRxGd

Answer 2

<div class="col-md-4">
<h2>Signup</h2>

<form class="form-signup">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control">
  </div>
  <div class="form-group">
    <label for="passwordconfirm">Password confirmation</label>
    <input type="password" class="form-control">
  </div>
  <button class="btn btn-danger btn-block" type="submit">Sign Up</button>
</form>
</div>

Answer 3

这里有两种不同方式的示例：一种只是限制表单本身的大小（宽度），另一种使用columns（您可以通过多种方式进行调整，这只是其中一种。）

见Grid Options和Forms

下面的工作示例。

.form-signup {
  max-width: 500px;
  padding: 15px;
  margin: 0 auto;
}
.form-signup .form-signup-heading {
  margin-bottom: 20px;
}
.form-signup .form-control {
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="form-signup-heading text-center">
    <h2>Sign up if you don't have an account:</h2>

  </div>
  <form class="form-signup">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label for="passwordconfirm">Password confirmation</label>
      <input type="password" class="form-control">
    </div>
    <button class="btn btn-danger btn-block" type="submit">Sign Up</button>
  </form>
</div>
<hr>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <h2 class="text-center">Sign up if you don't have an account:</h2>

    <form class="form-signup2">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control">
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form-group">
          <label for="passwordconfirm">Password confirmation</label>
          <input type="password" class="form-control">
        </div>
      </div>
      <div class="col-sm-4 col-sm-offset-4 text-center">
        <button class="btn btn-danger btn-block" type="submit">Sign Up</button>
      </div>
    </form>
  </div>
</div>

Answer 4

Bootstrap，尤其是 v4 及更高版本，跨越表单域。您需要将代码放在一个容器中，通常是一列，这样它就不会填满整个页面。 @Chris Dormani 和 @Alexei Shein 的示例和建议是正确的。