Question

而不是在单选按钮旁边显示标签，而是显示在它上方。

new.html.erb:

<div class="center jumbotron">
  <h2><%= t(:creating_task) %></h2>
  <%= form_for(@task, url: new_task_path) do |f| %>

  ...


    <div>
      <%= label :form_type, t(:multiple_choice) %>     
      <%= f.radio_button :form_type, '1' %>
      <div class="reveal-if-active">

      </div>
    </div>
    <div>
      <%= label :form_type, t(:fill_gap) %>
      <%= f.radio_button :form_type, '2' %>
      <div class="reveal-if-active">
      </div>
    </div>

  <% end %>
</div>

我正在使用bootstrap，即使我复制bootstrap示例，看起来像这样：它看起来如上图所示。

可能是什么原因？

@EDIT

    <h2>Tworzenie zadania</h2>
    <form class="new_task" id="new_task" enctype="multipart/form-data" action="/pl/tasks/new" accept-charset="UTF-8" method="post"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="xxx" type="hidden">

      <label for="text_Kategoria">Kategoria</label>
      <select name="task[category]" id="task_category"><option value=""></option>
<option value="1">Test</option></select>

      <label for="text_Obraz">Obraz</label>
      <input name="task[asset_name]" id="task_asset_name" type="file">
      <!-- dodać podgląd -->

      <label for="text_Opis">Opis</label>
      <textarea class="form-control" name="task[text]" id="task_text"></textarea>  
      <!-- dodać poprawne wyświetlanie równań -->
      <label for="form_type_Rodzaj zadania">Rodzaj zadania</label>


      <div>
        <label for="form_type_Wielokrotny wybór">Wielokrotny wybór</label>     
        <input value="1" name="task[form_type]" id="task_form_type_1" type="radio">
        <div class="reveal-if-active">

        </div>
      </div>
      <div>
        <label for="form_type_Wypełnianie luk">Wypełnianie luk</label>
        <input value="2" name="task[form_type]" id="task_form_type_2" type="radio">
        <div class="reveal-if-active">

        </div>
      </div>

</form>

CSS：

@import "bootstrap-sprockets";
@import "bootstrap";


/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

/* header */

#test-name {
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  letter-spacing: -1px;
  padding-top: 50px;
  font-weight: bold;
  float: left;
}

#user-link {
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  float: right;
  text-decoration: none; 
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

footer a {
  color: #555;
}

footer a:hover {
  color: #222;
}

footer small {
  float: left;
}

footer ul {
  float: right;
  list-style: none;
}

footer ul li {
  float: left;
  margin-left: 15px;
}

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input {
  height: auto !important;
}

#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked ~ &,
  input[type="checkbox"]:checked ~ & {
    opacity: 1;
    max-height: 100px;
    overflow: visible;
    padding: 10px 20px;
    transform: scale(1);
  }
}
/* Users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}

Answer 1

您可以使用display:inline-block之类的：

.new_task input[type="radio"] {
    float : left;
    width : auto;
}

单选按钮标签位置错误

1 个答案: