这是 addteacher.component.html 文件，我在我的角度应用程序中使用bootstrap 4 ，我想在同一行的第二个表单下对齐右保存按钮，我正在使用col-6在同一行中将两种形式的两个div分开，但是问题是我确实尝试了自举类，并且也进行了html align 标记，但是问题仍然相同
<div class="container-fluid bgstyle">
<div class="container pt-2 pb-2 cntnr">
<div class="row">
<div class="align-center col-6 ">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file" class="col-sm-10 form-control">Choose profile picture</label>
<input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
</form>
</div>
<div class="col-6">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
<div class="form-group">
<p class="input-group">
<i class="fa fa-unlock fa-2x fa-fw"></i>
<input type="password" class="form-control" id="password" placeholder="Password"
formCotrolName="password">
</p>
</div>
<div class=" input-group text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save Records </button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- end snippet -->
how can i align "save button" to the right side of the form
Here is my component.html file structure
> Updated
<div class="container-fluid bgstyle">
<div class="container pt-2 pb-2 cntnr">
<div class="row">
<div class="align-center col-6 ">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file" class="col-sm-10 form-control">Choose profile picture</label>
<input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
</form>
</div>
<div class="col-6">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
<div class="form-group">
<p class="input-group">
<i class="fa fa-unlock fa-2x fa-fw"></i>
<input type="password" class="form-control" id="password" placeholder="Password"
formCotrolName="password">
</p>
</div>
<div class=" input-group text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save Records </button>
</div>
</form>
</div>
</div>
</div>
</div>
我想在第二种形式下将按钮右对齐
答案 0 :(得分：1)
使用右上浮试试此代码：
<div class="container-fluid bgstyle">
<div class="container pt-2 pb-2 cntnr">
<div class="row">
<div class="align-center col-6 ">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file" class="col-sm-10 form-control">Choose profile picture</label>
<input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
</form>
</div>
<div class="col-6">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
<div class="form-group">
<p class="input-group">
<i class="fa fa-unlock fa-2x fa-fw"></i>
<input type="password" class="form-control" id="password" placeholder="Password"
formCotrolName="password">
</p>
</div>
<div class=" input-group text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save Records </button>
</div>
</form>
</div>
</div>
</div>
</div>
我如何将“保存按钮”对准表格的右侧 这是我的component.html文件结构
已更新
<div class="container-fluid bgstyle">
<div class="container pt-2 pb-2 cntnr">
<div class="row">
<div class="align-center col-6 ">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-camera fa-2x user-icon fa-fw" aria-hidden="true"></i>
<label for="file" class="col-sm-10 form-control">Choose profile picture</label>
<input type="file" name="pic" accept="image/* " (change)="selectedFile($event)"
class="border-left-0 pl-2 pr-2 form-control mr-2px" formControlName="pic">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
</form>
</div>
<div class="col-6">
<form [formGroup]="teacherform" class="pt-2 pb-2 ">
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="FirstName"
placeholder="Teacher ID" formControlName="id">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x user-icon fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Teacher Name" formControlName="name">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-user fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="username" aria-describedby="username"
placeholder="Designation" formControlName="designation">
</p>
</div>
<div class="form-group ">
<p class="input-group">
<i class="fa fa-envelope fa-2x fa-fw" aria-hidden="true"></i>
<input type="text" class="form-control " id="email" aria-describedby="email" placeholder="Date Of Birth"
formControlName="dob">
</p>
</div>
<div class="form-group">
<p class="input-group">
<i class="fa fa-unlock fa-2x fa-fw"></i>
<input type="password" class="form-control" id="password" placeholder="Password"
formCotrolName="password">
</p>
</div>
<div class="text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save Records </button>
</div>
</form>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
使用style="float: right"将您的按钮与表单最右边的按钮对齐。
<button type="submit" class="btn btn-primary" style="float: right">Save Records</button>
如果要提及像素，可以使用margin-left: some px
<button type="submit" class="btn btn-primary" style="margin-left: 100px">Save Records</button>
答案 2 :(得分：0)
有两种方法可以做到这一点：
通过使用引导程序类
<button type="submit" class="btn btn-primary float-right">Save Records</button>
通过使用样式属性
<button type="submit" class="btn btn-primary" style="float:right">Save Records</button>
答案 3 :(得分：0)
将按钮放在div中，并且类名称在Bootstrap 4中应为文本右对齐。
<div class ="container-fluid">
<div class ="container">
<div class="row">
<div class="col-6>
<form>
</form>
</div>
<div class="col-6">
<form>enter code here
<p class="input-group text-white ">
<div class="text-right">
<button type="submit" class="btn btn-primary ">Save Records </button>
</div>
</p>
</form>
</div>
</div>
</div>
</div>
我希望这会有所帮助。
答案 4 :(得分：0)
问题在这里
<div class=" input-group text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save
Records </button>
我现在使用输入组类，没有输入组也很好
<div class=" text-white text-right">
<button type="submit" class="btn btn-primary "style="float:right">Save
Records </button>
</div>
感谢所有贡献者：-)