Question

我正在使用Bootstrap 3，我正在尝试增加表单的宽度。

我的表格：

<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
    <div class="form-group">
      <input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
    </div>
    <div class="form-group">
      <div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
    </div>
    <br>
</form>

我尝试使用以下样式：

.form-inline .form-group input {
    width:440px;
}

但是，当我执行此操作时，包括“创建我的帐户”按钮在内的所有输入都会增加其大小以及我在应用程序中使用的所有其他内联表单。

是否有可能改变特定形式的单个输入的样式而不是全部？

Answer 1

您可以使用整个选择器，例如：

.form-inline .form-group input[name=commit] { ... }

#new_user .form-group input:nth-child(1) { ... }

还有很多

Answer 2

一种方法是在col-* ..

上使用form-group

<form accept-charset="UTF-8" action="/users" class="form-inline" role="form" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
    <div class="form-group col-sm-4">
      <input autofocus="autofocus" class="form-control" id="inputEmail3" name="user[email]" placeholder="Email" type="email" value="">
    </div>
    <div class="form-group">
      <div><input class="btn btn-default" name="commit" type="submit" value="Create my account"></div>
    </div>
    <br>
</form>

演示：http://www.bootply.com/117635

Bootstrap表格的宽度

2 个答案: