Question

我正在尝试将复选框与文本输入对齐。我希望文本框是一个表单控件，以便它与页面上的其他输入正确对齐。但是，如果我这样做，它将成为一个块元素，并在复选框后面有一个换行符。如果我不使用表单控件类，则输入框不够宽，与表单的其余部分相比，它看起来不正确。如果我使用网格布局，则复选框和文本框之间的空间太大。

下图代表以下代码：

<div>
    <input type="checkbox" />
    <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>

Answer 1

您可以使用form-inline或form-horizontal

内联型 http://getbootstrap.com/css/#forms-inline
水平状 http://getbootstrap.com/css/#forms-horizontal

或

您必须在输入控件中添加“display：inline-block”

Answer 2

您可以将Input-Group Add-on组件用于复选框/无线电。如果输入组框不适用于您的特定表单设置，您始终可以设置其样式。

请参阅示例代码段。

body {
  padding-top: 50px;
}
.input-group-addon.my-addon {
  background: white;
  padding-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">Default</div>
<div class="container">
  <div class="input-group"> <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>

    <input type="text" class="form-control" aria-label="...">
  </div>
</div>
<hr>
<div class="well">Added Styling</div>
<div class="container">
  <div class="input-group"> <span class="input-group-addon my-addon">
        <input type="checkbox" aria-label="...">
      </span>

    <input type="text" class="form-control" aria-label="...">
  </div>
</div>

Answer 3

像form-inline和form-group之类的简单课程可以为您提供帮助。

<div class="form-inline">
    <div class="form-group">
        <input type="checkbox"/>
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

小提琴：http://jsfiddle.net/2yao3x5r/

但是，来自bootstrap文档

这仅适用于视口中至少为768px的表单宽

此外，如果您的复选框属于您的输入，我建议使用input-group

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

如果您的视口小于768像素，我建议您使用.row和.col修饰符。 e.g。

<div class="row">
    <div class="col-xs-2 col-sm-2">
        <input type="checkbox"/>
    </div>
    <div class="col-xs-10 col-sm-10">
        <input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
    </div>
</div>

Answer 4

您可以使用input-group-addon并将复选框设置为输入标签。

为了更精确的控制，但不太干净，你可以为控件本身添加一些CSS：

#inputText {
      margin-left: 20px;
}
#inputCheckbox {
    position: absolute;
    top: 0px;
    margin-top: 0px;
}

HTML（带网格系统）：

<div class="col-md-2">XX</div>
<div class="col-md-8">
    <input type="text" placeholder="Enter your own vendor name here ..."
       class="form-control" id="inputText" />
    <input type="checkbox" class="pull-left" id="inputCheckbox" />
</div>
<div class="col-md-2">XX</div>

如何使用引导程序将复选框与文本输入表单控件紧密对齐？

4 个答案: