Bootstrap - span元素未与标签对齐

Question

我的表单是能够在视图和编辑模式之间切换。默认情况下，表单应以视图模式显示，当我单击编辑按钮时，字段应可用于更改。窗体在视图和编辑模式之间正常工作，但在视图模式下，span元素（显示值）与标签不对齐，我的意思是span元素的值显示比标签的水平线稍高一些。

以下是我的表格中的一段代码：

div class="container">
    <h1>Deal Form</h1>
    <form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
      <div class="form-group">
          <label class="control-label col-sm-2">First Name</label>
          <span class="control-label" *ngIf="!editMode">{{model.name}</span>
          <div class="col-sm-6" *ngIf="editMode">
             <input class="form-control"  type="text" name="name" [(ngModel)]="model.name" />
          </div>
      </div>
    </form>
</div>

Answer 1

使用form static control而不是<span>元素：

div class="container">
    <h1>Deal Form</h1>
    <form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
      <div class="form-group">
          <label class="control-label col-sm-2">First Name</label>
          <div class="col-sm-6" *ngIf="editMode">
             <p class="form-control-static" *ngIf="!editMode">{{model.name}}</p>
             <input class="form-control"  type="text" name="name" [(ngModel)]="model.name" />
          </div>
      </div>
    </form>
</div>

这是一个“静态”Bootstrap片段（查看完整页面）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <h1>Deal Form</h1>
  <form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
    <div class="form-group">
      <label class="control-label col-sm-2">First Name</label>
      <div class="col-sm-6">
        <input class="form-control" type="text" name="name" value="model name" />
      </div>
    </div>
  </form>
</div>

<div class="container">
  <h1>Deal Form</h1>
  <form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
    <div class="form-group">
      <label class="control-label col-sm-2">First Name</label>
      <div class="col-sm-6">
         <p class="form-control-static">model name</p>
      </div>     
    </div>
  </form>
</div>

Answer 2

它现在有效。谢谢您的帮助。但是我修改了代码以满足我的要求，如下所示。

                <div class="form-group">
                    <label class="control-label col-sm-2">First Name</label>
                    <div class="col-sm-6">
                    <p class="form-control-static" *ngIf="!editMode">{{var1}}</p>
                        <input class="form-control"  *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
                    </div>
                </div>