Bootstrap - текстовое поле с двумя переключателями

Question

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

Я хочу, чтобы пользователь мог решить, хотят ли они вводить значение доллара или процент, который затем будет использоваться для вычисления долларового значения.

Я хочу, чтобы входной текстовое поле, чтобы выглядеть подобно этому примеру:

Here is a codepen example: 

CodePen Example

Как я могу получить радио-кнопки, чтобы быть на самом верху друг друга в самонастройки? Или мне нужно прибегнуть к пользовательскому CSS, чтобы это сделать?

Answer 1

input элементы по умолчанию отображаются в виде inline;

Вы должны использовать display:block для них, чтобы показать один поверх другого.

.input-group-addon input{ 
    display:block; 
} 

Вы также должны были бы дать конкретный класс этой входной группы, так что вы будете иметь возможность использовать этот формат специфичного для данного класса только и не все input-group-addons

Answer 2

Поскольку Bootstrap, вы всегда можете обернуть ваши радио-ящики внутри классов BootStrap, например. Или блок отображения, но высота ввода будет увеличивать высоту, чем добавление ботстрапов div.

<div class="col-sm-12"> 
    <div class="col-sm-12"> 
     $<input type="checkbox" aria-label="..."> 
    </div> 
    <div class="col-sm-12"> 
     %<input type="checkbox" aria-label="..."> 
    </div> 
</div>