如何在表单中对齐保存按钮右侧

【问题标题】：how to align Save button right side in form如何在表单中对齐保存按钮右侧
【发布时间】：2020-10-12 17:06:36
【问题描述】：

这是 HTML 文档，我在我的 Angular 应用程序中使用 BootStrap4，我想在同一行的第二个表单下右对齐 SAVE 按钮，我正在使用 col-6 来划分 div 容器中的两个表单同一行，但问题是我确实尝试了引导类，也尝试了 CSS 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>

我想将此按钮在第二个表单下方对齐

【问题讨论】：

  • 还有一件事，我可以在控制器中以相同的表单 formBuilder 组获取两个值？
  • 这与 Angular 无关，只是纯粹的样式
  • @mpro 是的，你是对的

标签： html css bootstrap-4


【解决方案1】：

使用 float-right 试试这个代码：

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

【讨论】：

  • 我不想在完整的表单上浮动，只是保存按钮
  • 我已经编辑了我的答案，请检查。然后你添加忘记完成你的第一个 col-6 类的双引号。
  • 是的，谢谢我忘记了，是的，我看到了更新，但不幸的是我不知道为什么不工作，现在我用完整的代码更新了我的问题
  • 这是因为您的按钮父 div 的输入组类。删除它，它会正常工作。我已经更新了我的答案。
  • 是的，谢谢我自己确定了这是错误:-) 感谢您的努力
【解决方案2】：

使用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>

DEMO

【讨论】：

  • 这仅适用于按钮，但我想在网格系统中使用它，然后在第二种形式结束时，我正在用完整的代码更新我的问题
【解决方案3】：

有两种方法可以做到这一点：

  1. 通过使用引导类

    <button type="submit" class="btn btn-primary float-right">Save Records</button>

  2. 通过使用样式属性

    &lt;button type="submit" class="btn btn-primary" style="float:right"&gt;Save Records&lt;/button&gt;

【讨论】：

  • 一个样式的tag看起来像这样：&lt;style&gt;.
  • 我的错误，不是样式标签应该是属性
  • 它工作正常，我在 codepen 上检查过，然后只有我发布了。
  • @PrabhjotSinghKainth 先生，请立即检查完整代码
【解决方案4】：

问题出在这里 

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

感谢每一位贡献者:-)

【讨论】：

    【解决方案5】：

    将按钮放置在 div 中，并且类名在 Bootstrap 4 中应为 text-right。

    <div class ="container-fluid">
<div class ="container">
    <div class="row">
        <div class="col-12">
            <input class="form-control mb-3" placeholder="Enter">
            <div class="text-right">
                <button type="submit" class="btn btn-primary ">Save Records        </button> 
            </div>
            </p>
        </div>
    </div>
</div>

    我希望这会有所帮助。

    【讨论】：

    • 这行不通 :-( 我认为这是一排有两种形式的问题？
    猜你喜欢
    • 1970-01-01
    • 2018-05-22
    • 2017-01-25
    • 2019-09-29
    • 2015-07-11
    • 2021-12-20
    • 1970-01-01
    • 2011-12-11
    • 2019-02-25
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode