2014-01-31 3 views
1

У меня есть следующий код:Как вертикально выравниваются радиокнопки

<div class="container-fluid"> 
    <h2>Transfer Options:</h2> 
    <div class="row well well-sm"> 
     <div class="col-xs-6"> 
     <div id="sendTypeRadio" class="btn-group-vertical" > 
      <span class="input-group-addon"> 
      <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email 
      </span> 
      <span class="input-group-addon"> 
      <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments 
      </span> 
      <span class="input-group-addon"> 
      <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments 
      </span> 
     </div><!-- /input-group --> 
     </div><!-- /.col-xs-6 --> 
    </div> 
</div> 

Проблема заключается в том, что все кнопки рядом друг с другом на оси х. Я меняю вещи на день. Перемещение его из тега строки и обратно, удаление почти всего форматирования и т. Д. Я хочу поддерживать стиль ввода-группы-аддонов, но я хочу, чтобы каждая кнопка была в новой строке. Я искал и ничего не нашел, никаких подсказок?

+0

Это может звучать глупо, но есть вы пытались добавить
между пролетами? – TheOneWhoPrograms

+0

Тогда почему бы вам просто не отобразить пролеты как 'block' ...? – CBroe

+0

И, кстати, вы должны написать _better_ HTML. Вместо бессмысленных интервалов использование 'label' будет в порядке ... – CBroe

ответ

0

Задавая свой вопрос, который я придумал действительно дерьмовый ответ:

<div class="container-fluid"> 
<h2>Transfer Options:</h2> 
<div class="row well well-sm"> 
    <div class="col-xs-6"> 
    <div id="sendTypeRadio" class="btn-group-vertical" > 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email 
     </span> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments 
     </span> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2"> 
     <span class="input-group-addon"> 
     <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments 
     </span> 
     </div> 
     </div> 
    </div><!-- /input-group --> 
    </div><!-- /.col-xs-6 --> 
</div> 

Это дает мне каждый элемент на новую строку, но совершенно разоряет стилизации Bootstrap radio buttons

Смежные вопросы