Блог

Главная - Вопросы по программированию - Установить флажок рядом с меткой

Установить флажок рядом с меткой

#css #ruby-on-rails #forms #twitter-bootstrap

#css #ruby-on-rails #формы #twitter-bootstrap

Вопрос:

Документация по начальной загрузке и ПОЭТОМУ ответы, похоже, не отвечают на этот вопрос для меня. Я хочу поставить флажок рядом с его меткой. Это просто. Должно быть, я делаю что-то не так, но не могу понять это.

Я использую:

 #gemfile.lock, in my Rails application.

bootstrap-sass (3.1.1.1)
rails (4.0.3)

В моем представлении Rails:

 # devise/registrations/new.html.erb
  <%= f.label :accept_terms, class: "checkbox" do %>
    <%= f.check_box :accept_terms %> I agree to the terms and conditions listed here
  <% end %>

Который генерирует следующий HTML:

   <label class="checkbox" for="user_accept_terms">
    <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1"> I agree to the terms and conditions listed here
  </label>

Поочередно, в представлении:

 # devise/registrations/new.html.erb
  <%= f.label :accept_terms, "I agree to the terms and conditions listed here", class: "checkbox" %>
  <%= f.check_box :accept_terms %>

Что дает HTML:

   <label class="checkbox" for="user_accept_terms">I agree to the terms and conditions listed here</label>
  <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1">

Обе попытки приводят к тому, что флажок и метка отображаются в отдельных строках.

Я даже пытался вручную переопределить атрибуты отображения блока (успешно, согласно проверке Chome):

 #user_accept_terms { display: inline;}
label.checkbox { display: inline; }

Как я могу заставить эти элементы вести себя?

Заранее благодарю вас.

Ответ №1:

Просто удалите блок do...end 

  <fieldset>
  <%= f.label :accept_terms, class: "checkbox"  %>
   <%= f.check_box :accept_terms %>
  </fieldset>

Комментарии:

1. Я пробовал это изначально. Тот же результат. Я обновил свой вопрос, чтобы показать, как выглядит этот код.

2. Какой класс в форме? похоже, что bootstrap перезаписывает вас css

3. Нет специального класса формы. Просто пытаюсь воспроизвести базовый пример начальной загрузки: getbootstrap.com/css/#forms

4. Что произойдет, если вы напишете вне fieldset ?

5. Это выглядит так же. Я только что протестировал оба способа и обновил свой вопрос для ясности.

Ответ №2:

Можете ли вы изменить приведенный ниже пример, чтобы он работал?

 <div class="checkbox">
    <label>
        <input type="checkbox"> Remember me
    </label>
</div>

Я не уверен, как именно заставить rails генерировать для вас код такого типа, но, похоже, именно так рекомендуют документы bootstrap… Документы

Комментарии:

1. Я пробовал это, с div и флажком и текстом внутри скобок метки. Rails предоставляет больше деталей, которые я не могу скрыть, но по сути это выглядит так, как вы ввели.

2. Похоже, у вас должен быть какой-то другой CSS, который может конфликтовать, я попробовал этот HTML со стандартным шаблоном начальной загрузки, и он отображался бок о бок для меня…

Метки: