在Angular2中对齐ngForm内容

Question

我的 ngForm 中有一些字段。所有标签和输入都在一条直线上（垂直）对齐。 我希望它采用两列的形式，例如右侧的“处方详细信息”和左侧的“症状”。日期在右上角。

我尝试了不同的样式，例如位置和文本对齐，但都没有奏效。

代码如下：

<div class="row">

        <div class="column" style="padding: 7.5%" >
            <form #institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
                    <div class="form-group">
        <label> <strong>Date</strong> </label>
        <input type="date"   name="date" id="date"  class="form-control" [(ngModel)]="institutes.date">
        <br>
        <h2> <strong> Patient Problems</strong></h2>
        
        <label><strong> Symtoms</strong> </label>
        <input type="text"  name="symtoms" id="symtoms"   class="form-control"[(ngModel)]="institutes.symtoms">
        <label><strong>Allergy</strong>  </label>
        <input type="text"  name="allergy" id="allergy"   class="form-control"[(ngModel)]="institutes.allergy">
        <br>
        <h2><strong>Diagnosis</strong></h2>
        
        <label> <strong>Condition</strong> </label>
        <input type="text"  name="condition" id="condition"   class="form-control"[(ngModel)]="institutes.condition">
        <label><strong> Advice </strong></label>
        <input type="text"  name="advice" id="advice"   class="form-control"[(ngModel)]="institutes.advice">
        <br>
        <h2> <strong>Prescription</strong> </h2>
        <br>
        <label><strong> Medication </strong></label>
        <input type="text"  name="medication" id="medication"   class="form-control"[(ngModel)]="institutes.medication">
        <label><strong>Course</strong></label>
        <input type="text"  id="course" name="course"  class="form-control"[(ngModel)]="institutes.course">
        <br><br>
        
                    </div>
                    <button id="record" class="btn btn-primary" type="submit" >Add Record</button> </form>
    </div>
</div>

可以吗？

Answer 1

根据您的描述，我不确定您在布局细节方面的意思，但总而言之，我认为您应该逐步淘汰引导程序并使用CSS Grid，它也允许我们定义自己的网格作为该网格的指定区域，我们可以使用它来将我们的元素约束到那些定义的空间。我为您制作了一个简单的演示，让您查看here 以了解divs 是如何被它们的类限制在页面的某些部分的。您也可以在子元素上创建网格。它会让你的生活更轻松，你的代码也更干净。

Answer 2

在单个类中调整 ngForm 元素位置是一项艰巨的任务。

使用多个 classes="column/row" 并垂直/水平对齐这些类对我有帮助。

<div >
    <h1>
        New Patient Record
    </h1>
    <button (click)="append()" class="btn btn-primary" style="margin-left: 70%;">Prescribe more medicines</button>
</div>
<div class="row" style="padding-top: 0px;">
<div class="column"></div>
<div class="column">
<label > <strong>Date</strong> </label>
<input type="date"   name="date" id="date"  class="form-control" [(ngModel)]="institutes.date">
</div>
</div>
<div class="row" style="padding-top:0px" >
        <div class="container" style="padding-left: 7.5%" >
            <form #institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
                    <div class="form-group">
                            <div class="row">
                                    <div class="column">             
                                            
                       
        <h2><strong> Symptoms</strong> </h2>
        <input type="text"  name="symptoms" id="symptoms"   class="form-control"[(ngModel)]="institutes.symptoms">
        
        <br>
        <h2><strong>Diagnosis</strong></h2>
        
        <label> <strong>Condition</strong> </label>
        <input type="text"  name="condition" id="condition"   class="form-control"[(ngModel)]="institutes.condition">
        <label><strong> Advice </strong></label>
        <input type="text"  name="advice" id="advice"   class="form-control"[(ngModel)]="institutes.advice">
        <br>
        
    </div>
    <div class="column">
        <h2> <strong>Prescription</strong> </h2>
        <br>
        <label><strong> Medication </strong></label>
        <input type="text"  name="medication" id="medication"   class="form-control"[(ngModel)]="institutes.medication">
        <label><strong> Medicine Type </strong></label>
        <input type="text"  name="type" id="type"   class="form-control"[(ngModel)]="institutes.type">
        <label><strong>Course</strong></label>
        <input type="text"  id="course" name="course"  class="form-control"[(ngModel)]="institutes.course">
        <label><strong> How many per day? </strong></label>
        
        
        <input type="text"  name="cday" id="cday"   class="form-control"[(ngModel)]="institutes.cday">
        <br>
    </div>
    <div class="row">
        <div class="column"></div>
        <div class="column">
        <button id="record"  class="btn btn-primary" type="submit" >Add Record</button>
    </div>
</div>
   
       </div>
        <br><br>
        
                    </div>
                     </form>
                    
    </div>