Question

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

我尝试了不同的样式，例如位置和文本对齐，但没有一个起作用。

代码如下：

EventHandler<T>

有可能这样做吗？

Answer 1

根据您的描述，我不确定您对布局的具体含义是什么，但总的来说，我认为您应该逐步退出引导程序，并使用CSS Grid来允许我们定义自己的网格以及该网格的指定区域，可用于将元素约束到那些定义的空间。我为您制作了一个简单的演示，让您查看here，以了解div是如何被其类约束到页面的某些部分的。您也可以在子元素上创建网格。它将使您的工作变得更加轻松，代码也变得更加整洁。

Answer 2

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

使用多个class =“ 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>

在Angular2中对齐ngForm内容

2 个答案: