テキストボックスをレンダリングする前に新しい行が挿入されています

Question

次のコードスニペットがあります。改行文字（正確には<br>タグは）メールとそれに対応するテキストボックスの間に追加されている理由が、私はわからない：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>My Website!</h3> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 

 
<form> 
 
    <div class="form-group" align="center"> 
 
    <div class="input-group" style="width=5px"> 
 

 
     <center> 
 
     <span class="input-group-addon" id="basic-addon1">Email: </span> 
 
     <input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" /> 
 
     </center> 
 
    </div> 
 
    </div> 
 

 
    <div class="form-group" align="center"> 
 
    <div class="input-group"> 
 
     <center> 
 
     <label for="Password"></label>Password: 
 
     <input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2"> 
 
     </center> 
 
    </div> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-default">Login!</button> 
 
</form> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

表示されている出力は次のとおりです。

変更を同じ行に表示するには、どのような変更を行う必要がありますか？

Answer 1

私は変更のカップルをやった、

• は手動幅
• を削除<center>タグ
• を削除し、あなたのコントロールがに移動するように、「行」とし、「col- *」のdivを使用してコントロールをラップセンターは の親のdivに制御を
• 追加「テキストの中心を」（コードを参照してください）

あなたの問題を解決しますか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>My Website!</h3> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 

 
<form> 
 
<div class="row"> 
 
<div class="col-xs-4 col-xs-push-4"> 
 
    <div class="form-group"> 
 
    <div class="input-group">   
 
     <span class="input-group-addon" id="basic-addon1">Email: </span> 
 
     <input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" />  
 
    </div> 
 
    </div> 
 
</div> 
 
    </div> 
 
<div class="row"> 
 
<div class="col-xs-4 col-xs-push-4"> 
 
    <div class="form-group"> 
 
    <div class="input-group">   
 
     <span class="input-group-addon" >Password</span> 
 
     <input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2">   
 
    </div> 
 
    </div> 
 
</div> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Login!</button> 
 
</form> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>