html - 如何对齐这个 Bootstrap 单选按钮？

Question

PAGE IS HERE

我使用以下代码创建了单选按钮，按钮和文本彼此相邻。这很好，但它不是垂直中间对齐到单选按钮左侧的文本输入字段。

<div class="col-md-3">
    <div id="edit-donation-frequent" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
         </div>
    </div>
</div>
<div class="col-md-3">
    <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
    </div>
</div>

PAGE IS HERE

我把 .form-item label.option { vertical-align: middle; } 但还是一样的结果。然后我尝试了 margin-top 和其他一些 css 样式，但无法得到我想要的。

我希望两个单选按钮(每月、一次性和固定电话)看起来像下面的屏幕截图。

和

如何像截图一样调整页面。

[更新]

根据 Rachel 的要求，该部分(行)的代码(无论如何访问 this page 您可以查看源代码):

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
            <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-select form-item-donation-currency form-group">
            <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
                <option value="DKK">DKK</option>
                <option value="GBP">GBP</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
                <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
                <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
             </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
            <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
    </div>
</div>

Answer 1

好的，首先你需要像处理每月/一次时间字段一样将周围的 div 放在 Land 行元素周围，并为每月/一次制作包装器，以便它们相同

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
    <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-item form-type-select form-item-donation-currency form-group">
    <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
      <option value="DKK">DKK</option>
      <option value="GBP">GBP</option>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
    </select>
    </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
        </div>
    </div>
    </div>
    <div class="col-md-3">
  <div id="" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
</div>
        </div>

和

<div class="col-md-4">
  <div class="form-item form-type-radio form-item-donation-frequent form-group">
    <input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">  
    <label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
    </div>
</div>

然后新建一个css规则

.form-item.form-type-radio {
    padding-top: 0.5em;
    margin-top: 0;
}

这应该可以解决您的问题。希望有帮助