html - 在 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

根据你的描述，我不太确定你在布局细节方面的意思，但总而言之，我觉得你应该逐步淘汰 Bootstrap 并使用 CSS Grid，这允许我们定义我们自己的网格以及该网格的指定区域，我们可以使用这些区域将我们的元素限制在那些定义的空间内。我做了一个简单的demo给大家看看here查看 div 是如何被它们的类限制在页面的某些部分的。您也可以在子元素上创建网格。它会让您的生活更轻松，您的代码也更清晰。