css - 为什么 symfony 表单的复选框看起来很奇怪？

Question

我正在使用带有 Bootstrap 的独立 symfony 形式的 Twig 。这是我的模板源代码:

    {{ form_start(form) }}
      <div class="row">
        <div class="col">
         {{ form_row(form.firstnameFa) }}
        </div>
        <div class="col">
          {{ form_row(form.lastnameFa) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
         {{ form_row(form.firstnameEn) }}
        </div>
        <div class="col">
          {{ form_row(form.lastnameEn) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.email) }}
        </div>
        <div class="col">
         {{ form_row(form.password) }}
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.birthDate) }}
        </div>
        <div class="col">
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.showPhoto) }}
        </div>
        <div class="col">
        </div>
    <div class="w-100"></div>
        <div class="col">
          {{ form_row(form.applyCard) }}
        </div>
        <div class="col">
        </div>
      </div>
     <button class="btn btn-primary" type="submit">Submit form</button>
    {{ form_end(form) }}

这是我查看的 html 资源:

<form name="form" method="post">

  <div class="row">

    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_firstnameFa">نام</label><div class="col-sm-10"><input type="text" id="form_firstnameFa" name="form[firstnameFa]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_lastnameFa">نام خانوادگی</label><div class="col-sm-10"><input type="text" id="form_lastnameFa" name="form[lastnameFa]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_firstnameEn">نام به انگلیسی</label><div class="col-sm-10"><input type="text" id="form_firstnameEn" name="form[firstnameEn]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_lastnameEn">نام خانوادگی به انگلیسی</label><div class="col-sm-10"><input type="text" id="form_lastnameEn" name="form[lastnameEn]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_email">ایمل</label><div class="col-sm-10"><input type="email" id="form_email" name="form[email]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
     <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_password">رمز عبور</label><div class="col-sm-10"><input type="password" id="form_password" name="form[password]" required="required" class="form-control" /></div>
    </div>
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><label class="col-form-label col-sm-2 required" for="form_birthDate">تاریخ تولد</label><div class="col-sm-10"><input type="text" id="form_birthDate" name="form[birthDate]" required="required" class="form-control" /></div>
    </div>
    </div>
    <div class="col">
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><div class="col-sm-2"></div><div class="col-sm-10"><div class="form-check">        <input type="checkbox" id="form_showPhoto" name="form[showPhoto]" required="required" class="form-check-input" value="1" />
        <label class="form-check-label required" for="form_showPhoto">درخواست صدور کارت دارید؟</label></div></div></div>
    </div>
    <div class="col">
    </div>

<div class="w-100"></div>

    <div class="col">
      <div class="form-group row"><div class="col-sm-2"></div><div class="col-sm-10"><div class="form-check">        <input type="checkbox" id="form_applyCard" name="form[applyCard]" required="required" class="form-check-input" value="1" />
        <label class="form-check-label required" for="form_applyCard">عکس شما در فهرست اعضا نشان داده شود؟</label></div></div></div>
    </div>
    <div class="col">
    </div>

  </div>

 <button class="btn btn-primary" type="submit">Submit form</button>

<input type="hidden" id="form__token" name="form[_token]" value="qwfZkACcKM9ylhGXAYoor8oV1DBNCMAE8nzPC8J_J24" /></form>

这是截图

1) 为什么复选框看起来很奇怪？他们在第一封信上。如何解决？这与英语相同。

2) 如何将按钮置于中心有两列但按钮必须位于中心？

编辑:我只使用 bootstrap css:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  

Answer 1

尝试使用向右浮动或边距设置您的复选框样式，以下是一些示例:

.form-check input {
margin-left: 30px;
}

或者这个:

.form-check input {
float:right;
}

编辑:你也可以试试这个:

.form-check-input {
    margin-right: -1.55rem;
}