Question

在Bootstrap中，如何强制使用两个项目（标签和文本框）作为不可分割的组，以便它们始终显示在同一行上，并且永远不会破坏，标签位于一行的末尾和下一行开头的文本框？

Answer 1

我认为这是您正在努力实现的目标（除了将class="form-horizontal"添加到form元素之外，主要是调整列大小（即xs-3，sm-9， md-1等）根据标签的字符长度来看看有什么意义。

包含你的大部分CSS都不需要实现这一目标;它以页面为中心，否则输入将成为列的宽度，一旦到达手机视图端口，表单的背景颜色也会改变，因为您的表单可能会开始分解，标签固定在一侧

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

＆＃13;

#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;
  }

＆＃13;

<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>

＆＃13;

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

1 个答案: