html - 在呈现文本框之前插入新行

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>标记
• 删除手动宽度
• 用“row”包裹你的控件，然后用“col-*”div 包裹你的控件，这样你的控件就会移动到中心(引用代码)
• 将“text-center”添加到父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>