Radio button label is in wrong place - css

Question

Instead of showing label next to radio button, it is shown above it.
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>
I am using bootstrap and even when I copy bootstrap example, which looks like this:
It looks like in picture above.
What could be the reason?
#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

You can use display:inline-block like:
.new_task input[type="radio"] {
float : left;
width : auto;
}