增加bootstrap form-inline中文本框的宽度

Question

我正在尝试增加表单内联中文本框的宽度。但是，我无法增加宽度。甚至关联的标签也会隐藏在文本框下方。

<div class="row">
  <div class="col-xs-12">
    <form class="form-inline">
      <div class="form-group">
        <label for="UserNameTextBox">Name</label>
        <div class="col-xs-6">
          <input type="text" class="form-control" id="UserNameTextBox" placeholder="User Name">
        </div>        
      </div>
      <div class="form-group">
        <label for="UserEmailTextBox">Email</label>
        <input type="email" class="form-control" id="UserEmailTextBox" placeholder="User Email">
      </div>
      <button type="button" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

Fiddler： https://jsfiddle.net/Vimalan/mt30tfpv/2/

当前

预期：（文字框的长度增加）

任何建议都表示赞赏。

Answer 1

您可以使用此CSS代码设置文本框的宽度：

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

更新（另一种解决方案）

设置标签并输入display至inline-block，如下所示：

.myform label, .myform input {
  display:inline-block;
}

并将输入宽度设置为80％，如下所示：

.myform input {
    width:80%;
}

给名称容器（输入+标签）5个boostrap列col-lg-5 col-md-5 col-xs-5

提供电子邮件容器（输入+标签）5个boostrap列col-lg-5 col-md-5 col-xs-5

给按钮2个boostrap列col-lg-2 col-md-2 col-xs-2

输出：

<强>

<强> Check it out.