单选按钮放下单选按钮下方的文本

Question

我正在使用Bootstrap v3.3.0并且我的单选按钮出现问题。

问题是长文本丢弃单选按钮下方的文本而不是仅包装在第一行下面。在宽屏幕显示器上全屏显示它看起来很好。但随着尺寸变小，它看起来非常糟糕。我以为bootstrap会自动换行。

我用错误的方式使用bootstrap吗？

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

Answer 1

你可以尝试的一件事是将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>

Answer 2

您需要将标记放在标记内。

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