Question

不确定这是铁轨问题还是css问题。

我使用form_for生成了单选按钮，但是单选按钮离问题太远而忽略了父元素的约束。您可以在代码段中看到单选按钮的行为。我该如何解决这个问题？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-8 col-md-offset-1 color-it'>
      <div class="questions">
        <label for="submitted_quiz_Quiz 1 Question 1">Quiz 1 question 1</label>
        <input value="4" type="hidden" name="submitted_quiz[submitted_answers_attributes][0][question_id]" id="submitted_quiz_submitted_answers_attributes_0_question_id" />
        <div class='options'>
          <div class='radio'>
            <input class="quiz-radio" type="radio" value="Quiz 1 Question 1 Answer 1" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1" />
            <label class="quiz-radio-answer" for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1">Quiz 1 question 1 answer 1</label>

          </div>

        </div>

      </div>
    </div>
  </div>
</div>

＆＃13;

如果你想用轨道fields_for生成这个，那么它是：

<%= f.fields_for (:submitted_answers) do |ff| %>

<%= ff.hidden_field :question_id, :value => question.id %>
<div class = 'options'>
<% question.answers.each do |answer| %>
<div class = 'radio'>
<%= ff.radio_button :content, answer.content, :class => 'quiz-radio' %>
<%= ff.label :content, :value => answer.content, :class => 'quiz-radio-answer' %>



</div>
<% end #answer.each do %>

</div>
<% end #fields_for (:submitted_answers) do %>

Answer 1

嗨，有一种默认风格来自boostrap css

<强> boostrap.css

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

所以你必须覆盖你可以使用 radio 类附近的新类 custom-radio

<div class='radio custom-radio'>
            <input class="quiz-radio" type="radio" value="Quiz 1 Question 1 Answer 1" name="submitted_quiz[submitted_answers_attributes][0][content]" id="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1" />
            <label class="quiz-radio-answer" for="submitted_quiz_submitted_answers_attributes_0_content_quiz_1_question_1_answer_1">Quiz 1 question 1 answer 1</label>

          </div>

<强> CSS

 .custom-radio label {
    padding-left: 0px !important;
}

.custom-radio input[type=radio] {
   margin-left: 0px !important; 
}

轨道收音机按钮太远了

1 个答案: