Как выровнять кнопку Сохранить в правой части формы - PullRequest
Новая
       4

Как выровнять кнопку Сохранить в правой части формы

0 голосов
/ 08 ноября 2019

Это файл addteacher.component.html , Я использую загрузчик 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>

я хочу выровнять эту кнопку справа под второй формой

Ответы [ 5 ]

1 голос
/ 08 ноября 2019

Попробуйте этот код, используя 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>
0 голосов
/ 08 ноября 2019

Проблема была здесь 

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

Спасибо каждому вкладчику :-)

0 голосов
/ 08 ноября 2019

поместите кнопку в 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>

Надеюсь, это поможет.

0 голосов
/ 08 ноября 2019

Есть два способа сделать это:

  1. Используя класс начальной загрузки 

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

  2. Используя атрибут стиля

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

0 голосов
/ 08 ноября 2019

Используйте 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...