在 Bootstrap 中，将两个项目组合在一起

Question

在 Bootstrap 中，如何强制两个项目 - 标签和文本框 - 充当不可分割的组，以便它们始终出现在同一行，并且永远不会被破坏，标签位于一行的末尾以及下一行开头的文本框？

Answer 1

我认为这就是您要完成的任务（除了将 class="form-horizontal" 添加到 form 元素之外，主要是调整列大小（即 xs-3、sm-9、md-1 等）根据标签的字符长度查看什么是有意义的。

包含的大部分 CSS 不需要您实现这一点；它以页面为中心，否则输入将变为列的宽度，并且一旦您到达手机查看端口，表单的背景颜色也会发生变化，因为您的表单可能会开始分解，标签固定在一侧。

所有这些都可以根据您的需要进行调整。

#boostrapForm .control-label {
  text-align: right;
  padding-right: 0px;
}
#boostrapForm input[type=text],
#boostrapForm input[type=email],
#boostrapForm input[type=password],
{
  margin-left: -7px;
}
.formCenter {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.formCenter.formChange {
  min-width: 300px;
  max-width: 500px;
  padding: 25px;
}
@media (max-width: 768px) {
  .formCenter.formChange {
    width: 100%;
  }
}
@media (max-width: 359px) {
  form {
    background: #f00;
    color: #fff;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="formCenter formChange">
    <form class="form-horizontal" id="boostrapForm">
      <div class="form-group">
        <label for="inputEmail3" class="col-xs-3 control-label">Email</label>
        <div class="col-xs-9">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-xs-3 control-label">Password</label>
        <div class="col-xs-9">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
          <div class="checkbox">
            <label>
              <input type="checkbox">Remember me</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</div>