在調整瀏覽器窗口大小時在輸入旁邊懸浮的標籤

我正在嘗試創建一個靜態註冊表單。不幸的是，瀏覽器窗口最大化時，輸入旁邊的標籤保持浮動。即使在調整大小時，我也希望整個盒子保持不變。它應該看起來像這樣。在調整瀏覽器窗口大小時在輸入旁邊懸浮的標籤

我使用Bootswatch: Yeti，而不是正常引導。有沒有人知道這個問題的解決辦法？

我的代碼

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

這裏是我的JSFiddle這樣你就可以與自己我的代碼進行實驗。

來源

2015-09-04 Aruloci

你是說，在同一行？ – romuleald

而不是停留在同一行上，它應該看起來像上圖所示。 @romuleald – Aruloci

我不確定這個問題對我來說很清楚，因爲它就是它在小提琴中所做的事情！ – romuleald

您應該將標籤放在包含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/。

來源

2015-09-04 11:58:56 cakan

在調整瀏覽器窗口大小時在輸入旁邊懸浮的標籤

回答

相關問題