Question

这是一个尽可能接近的屏幕截图，其中的单选按钮与其他列连续排列：

问题是单选按钮没有水平排列（不等于顶部和底部的空间）。这并不可怕，但它看起来很尴尬。如果有一些方法可以使单选按钮看起来像是表单的一部分，那将是很好的。也许让它们更大，在容器中占用更多空间，并确保单选按钮/标签垂直对齐。

以下是表格中的相关代码：

<div class="row">
    <div class="col-sm-4">
        <div class='form-group'>
            <%= f.label :web %> 
            <%= f.text_field :web, class: "form-control" %>
        </div>
    </div>
    <div class="col-sm-4">
        <div class='form-group'>
            <%= f.label :business_contact, "Business Contact" %>  
            <%= f.text_field :business_contact, class: "form-control" %>
        </div>
    </div>

    <div class="col-sm-4">
        <div class='text-center'>
            <br>
            <%= f.label :gender, "Gender: " %> 
            <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
            <%= f.label :male %>
            <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
            <%= f.label :female %>
        </div>
    </div>
</div>

Answer 1

  <div class="col-sm-4">
    <div class='text-center'>
        <br>
        <!-- Instead add a span here below "<br>" -->
        <span style="margin-top:5px"> <!-- start here like this -->
        <%= f.label :gender, "Gender: " %> 
        <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
        <%= f.label :male %>
        <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
        <%= f.label :female %>
  </span> <!-- and instead end it here -->
  </div>      
</div>

Answer 2

我最终得到了这个并称之为好：

    <div class="col-sm-4">
        <div >
            <%= f.label :gender %> <br>
            <%= f.radio_button :gender, 'Male', checked: (@employer.gender == 'Male' || @employer.gender == 'male'), class: "radio-inline" %>
            <%= f.label :male %>
              <span> &nbsp;&nbsp;&nbsp;</span>
            <%= f.radio_button :gender, 'Female', checked: (@employer.gender == 'Female' || @employer.gender == 'female'), class: "radio-inline" %>
            <%= f.label :female %>
        </div>
    </div>

在列上下文中，Bootstrap单选按钮很难，而不是与行中的其他列对齐

2 个答案: