引导多个标签并在同一行输入

Question

我试图将两个标签和两个输入放在同一行上。这可能吗？

我希望它看起来像这样都在同一行：

[标签][输入][按钮]空白[标签2][输入2]

到目前为止我所拥有的

   <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
      <span class="input-group-btn ">
         <button type="button" class="btn" data-ng-click="click()">...</button>
       </span>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

Answer 1

使用 Bootstrap 表单内联和自定义控件内联类。

<form class="form-horizontal">
            <div class="form-inline">
                <div class="control-group custom-control-inline">
                    <label class="col-sm-2 col-form-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email" />
                        <span class="input-group-btn ">
                            <button type="button" class="btn" data-ng-click="click()">...</button>
                        </span>
                    </div>
                </div>
                <div class="control-group custom-control-inline">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password" />
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls form-check-inline">
                        <label class="checkbox">
                            <input type="checkbox" />
                            Remember me
                        </label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>
                </div>
            </div>
        </form>

Answer 2

这可能对你有帮助

<div class="col-md-6 col-xs-6">
    <div class="input-group">
        <span class="input-group-addon">Your label</span>
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div><!-- /input-group -->
</div>
<div class="col-md-6 col-xs-6">
    <div class="input-group">
        <span class="input-group-addon">Your label</span>
        <input type="text" class="form-control">
    </div>
</div>

小提琴这里

Answer 3

Raviteja 的解决方案很好，但以下代码将创建您在评论中提到的表单（“我的标签看起来不像按钮”）。使用Bootstrap 3.3.7。

<form class="form-inline">
<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-control">
  <button class="btn btn-default" type="button">Go!</button>
</div>

<div class="form-group" style="margin-left:30px">
  <label class="form-label">Password</label>
  <input type="password" class="form-control">
</div>

<div class="form-group" style="margin-left:30px">
  <div class="checkbox">
  <label><input type="checkbox">Remember me</label>
  </div>
</div>
</form>"