Question

我正在尝试创建一个静态寄存器表单。不幸的是，当浏览器窗口最大化时，输入旁边的标签会一直浮动到左侧。即使在调整大小时，我希望整个盒子保持不变。它看起来应该是这样的。

我正在使用Bootswatch: Yeti而不是普通的bootstrap。有谁知道解决这个问题？

我的代码

HTML 的

<form class="form-horizontal registerbox">
  <fieldset>
    <legend>Register</legend>
    <div class="form-group">
      <label for="inputName" class="col-lg-2 control-label">Firstname</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputName" placeholder=""></input>
      </div>
      <label for="inputSurname" class="col-lg-2 control-label">Surname</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputSurname" placeholder=""></input>
      </div>
      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
        <input type="mail" class="form-control" id="inputEmail" placeholder=""></input>
      </div>
      <label for="inputPassword" class="col-lg-2 control-label">Password</label>
      <div class="col-lg-10">
        <input type="password" class="form-control" id="inputPassword" placeholder=""></input>
      </div>
      <label for="inputPasswordConf" class="col-lg-2 control-label">Confirm Password</label>
      <div class="col-lg-10">
        <input type="password" class="form-control" id="inputPasswordConf" placeholder=""></input>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button type="submit" class="btn btn-primary center" style="width: 100%; background-color: #1fad5c; border-color: #f5f5f5;">Submit</button>
      </div>
    </div>
  </fieldset>
</form>

CSS

.registerbox {
    margin: 0 auto;
    margin-top: 50px;
    width: 350px;
    padding: 19px;
    border: 1px solid #e7e7e7; 
}

这是我的JSFiddle，因此您可以亲自体验我的代码。

Answer 1

您应该将标签放在包含输入字段的div中。所以，而不是：

<label class="col-lg-2 control-label" for="inputName">Firstname</label>
<div class="col-lg-10">
    <input id="inputName" class="form-control" type="text" placeholder="">
</div>

你的HTML应该是这样的：

<div class="col-lg-10">
    <label class="control-label" for="inputName">Firstname</label>
    <input id="inputName" class="form-control" type="text" placeholder="">
</div>

这是小提琴https://jsfiddle.net/ob1jn05k/5/。

调整浏览器窗口

1 个答案: