Question

我正在使用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>

Answer 1

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

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

Answer 2

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

单选按钮在单选按钮下方放置文本

2 个答案: