Question

我正在尝试在同一行上放置两个标签和两个输入。这甚至可能吗？

我希望它在同一条线上看起来像这样：

[标签] [输入] [按钮] WhiteSpace [Label2] [Input2]

到目前为止我有什么

   <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

这可能对您有所帮助

deg

小提琴here

Answer 2

使用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 3

Raviteja的解决方案很好，但下面的代码将创建您在评论中提到的表单（＆＃34;没有我的标签看起来像按钮＆＃34;）。使用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>"

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

3 个答案: