单选按钮将文本置于单选按钮下方

debugcn 发表于 Dev

大卫布里顿

我正在使用 Bootstrap v3.3.0，但我的单选按钮有问题。

问题是任何长文本都会将文本放在单选按钮下方，而不是仅在第一行下方换行。在宽屏显示器上全屏显示它看起来不错。但随着尺寸变小，它看起来很糟糕。我认为引导程序会自动为您自动换行。

我是否以错误的方式使用引导程序？

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <input id="Valid-Driver-License" name="residenceProof" type="radio" required value="#form.FLDL#" />
            <label for="Valid-Driver-License">A valid driver license or ID card with photo issued by any US state or territory (Florida driver license must indicate a Manatee County address)</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <input id="Canadian-Driver-License" name="residenceProof" type="radio" required value="#form.Canadian#" />
            <label for="Canadian-Driver-License">A Canadian driver license or ID card </label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <input id="Valid-Passport" name="residenceProof" type="radio" required value="#form.Passport#" />
            <label for="Valid-Passport">A valid US or out-of-country passport</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <input id="Power-Of-Attorney-Copy" name="residenceProof" type="radio" required  value="#form.POA#" />
            <label for="Power-Of-Attorney-Copy">If transaction is being completed by <a href="https://www.powerdms.com/public/MCTC/documents/1474142" target="_blank">Power of Attorney</a> a copy of the valid driver license, identification card or passport for both the applicant <font color="red">and</font> the person appointed power of attorney is required. <font color="red">If the Power of Attorney appoints a business/dealership alone or with an individual, the business/dealership must include a letter of authorization on their letterhead stating that the person who is signing by power of attorney on their behalf is authorized to do so.</font></label>
        </div>
    </div>
</div>

伊万S95

你可以尝试的一件事是把标签放在input里面label；这样，文本将换行并在新行中继续，但第一个将始终保留在输入的一侧。

.example-2 {
  display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="Valid-Driver-License">
       <input id="Valid-Driver-License" name="residenceProof" type="radio" required value="#form.FLDL#" />
      A valid driver license or ID card with photo issued by any US state or territory (Florida driver license must indicate a Manatee County address)</label>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input id="Canadian-Driver-License" name="residenceProof" type="radio" required value="#form.Canadian#" />
      <label for="Canadian-Driver-License">A Canadian driver license or ID card </label>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input id="Valid-Passport" name="residenceProof" type="radio" required value="#form.Passport#" />
      <label for="Valid-Passport">A valid US or out-of-country passport</label>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="Power-Of-Attorney-Copy">
      <input id="Power-Of-Attorney-Copy" name="residenceProof" type="radio" required value="#form.POA#" />
      If transaction is being completed by <a href="https://www.powerdms.com/public/MCTC/documents/1474142" target="_blank">Power of Attorney</a> a copy of the valid driver license, identification card or passport for both the applicant <font color="red">and</font> the person appointed power of attorney is required. <font color="red">If the Power of Attorney appoints a business/dealership alone or with an individual, the business/dealership must include a letter of authorization on their letterhead stating that the person who is signing by power of attorney on their behalf is authorized to do so.</font></label>
    </div>
  </div>

</div>


<!-- New Example -->
<div class="row">
  <div class="col-lg-12">
    <div class="form-group example-2">
      <input id="Power-Of-Attorney-Copy" name="residenceProof" type="radio" required value="#form.POA#" />
      <label for="Power-Of-Attorney-Copy">
      If transaction is being completed by <a href="https://www.powerdms.com/public/MCTC/documents/1474142" target="_blank">Power of Attorney</a> a copy of the valid driver license, identification card or passport for both the applicant <font color="red">and</font> the person appointed power of attorney is required. <font color="red">If the Power of Attorney appoints a business/dealership alone or with an individual, the business/dealership must include a letter of authorization on their letterhead stating that the person who is signing by power of attorney on their behalf is authorized to do so.</font></label>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。