Bootstrap радио-рядная линия для упаковки и складывали радио кнопка

Question

Гола

У меня динамический ряд переключателей. Я хочу, чтобы они появлялись в строке и при необходимости опускались до следующей строки. В зависимости от размера экрана я хочу, чтобы они складывались.

Текущая задача

Прямо сейчас, я использую:

<label class="radio-inline"> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
    Radio button's label 1 
</label> 

<label class="radio-inline"> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 
    Radio button's label 2 
</label> 

...

<label class="radio-inline"> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX"> 
    Radio button's label X 
</label> 

Те радио кнопки, как я уже говорил динамичны и там может быть любое их число. В настоящее время они отображаются встроенными. Но, когда на один ряд (даже на большом мониторе) слишком много, они выпадают, и есть margin-left: 10px, связанный с .radio-inline. Итак, первая радиокнопка в строках 2, 3, 4 и т. Д. Находится в 10px слева от первой радиокнопки в строке 1. Это очень заметно, когда экран сжат и все переключатели уложены в стопку. Опять же, строка 1 находится слева, но каждая следующая строка под ней сдвигается на 10 пикселей справа.

Что я Пробовал

Я попытался положить их в Col-LG- #. Что касается стекирования, это работает, но это вызывает перенос слов на ярлыках переключателя.

Answer 1

Лучше всего использовать систему сетки.

<div class="row"> 
    <div class="col-md-"> 
    <label class="radio-inline"> 
     <input type="radio" name="inlineRadioOptions" id="inlineRadioX" value="optionX"> 
     Radio button's label X 
     </label> 
    </div> 
</div> 

Таким образом, каждый раз, когда вы добавляете один из них, он переходит на максимум 12, а затем плавает на следующую строку. SO, если он обертывается, как вы говорите, вы можете изменить число до чуть большего размера.

Answer 2

Я думаю, что это будет:

.radio-inline+.radio-inline { 
    margin-left: 0; 
} 

.radio-inline { 
    margin-right: 10px; 
} 

http://jsfiddle.net/rm7n73ep/

Answer 3

раствор 1

Используйте JS Переберите каждую кнопку радио в группе, getBoundingClientRect() на каждом, и первый чтобы иметь другой bottom, чем предыдущий, удалите его маржу слева. Моя проблема заключается в том, что это нужно будет делать при изменении размера экрана. Я не фанат.

Решение 2

Быстрый и легкий, добавить margin-left: 10px к первой радио-рядный кнопки, используя свой собственный класс CSS (не хакерство Bootstrap). Downside, это добавляет отступы для вашей группы переключателей. Поверхность, это быстрое легкое исправление, отсутствие взлома, использование CSS над JS, а отступ действительно выглядит красиво.

Решение 2 - Sidenote

Если вы не против взлома Bootstrap чуточку, это в вашем CSS файл, который добавляется после Bootstrap годов.

@media (max-width: 768px) 
{ 
    .radio-inline 
    { 
     display: block; 
    } 
} 

Это приводит к тому, что переключатели сразу складываются, когда на меньшем экране вместо того, чтобы плавать рядом друг с другом. Я заметил, что в некоторых случаях на меньшем экране первые четыре переключателя были уложены в стек, но затем два с меньшим количеством текста были помещены в одну строку.

Answer 4

У меня такая же проблема.

попробовать это:

<label class="radio-inline" ***style="margin-left: 0px;"***> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 
    Radio button's label 1 </label> 

<label class="radio-inline" ***style="margin-left: 0px;"***> 
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 
    Radio button's label 2 </label> 

...

вы должны быть все в порядке!

Answer 5

BIG Инлайн Bootstrap 3 Радио Кнопки

CSS

.radioButtonBig { 
transform: scale(1.7); 
} 

HTML (используя Bootstrap 3)

   <div class="form-group"> 
        <div class="form-group"> 
         <label for="">3. Question three is all about inserting radio buttons:</label> 
         <p class="radio-inline"></p> 
         <label class="radio-inline"> 
          <input class="radioButtonBig" type="radio" name="rbg6" value="yes" onclick="rbShowSection(this, 'q3text');"> 
          &nbsp;Yes 
         </label> 
         <p class="radio-inline"></p> 
         <label class="radio-inline"> 
          <input class="radioButtonBig" type="radio" name="rbg6" value="no" onclick="rbShowSection(this, 'q3text');"> 
          &nbsp;No 
         </label> 
        </div> 
       </div> 

Примечание: пустые р метки просто создают пробелы между ними - но супер необходимые , Немного ручной, но при необходимости.