bootstrap: отображение радио кнопки в центре слов

Question

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

Скрипач:https://jsfiddle.net/ebwwvy6m/2/

HTML:

<label class="radio-inline"> 
    Search by 
    <input type="radio" name="accountsearch" value="name"> 
    Lastname, Firstname 
</label> 
<label class="radio-inline"> 
    <input type="radio" name="accountsearch" value="email"> 
    Email 
</label> 

Выпуск:

Слово 'на' становится спрятана под радио-кнопки.

Если я двигаюсь «Поиск по» текст вне метки, то текст и радио-кнопки не выстраиваясь в прямой линии.

Как я должен решить эту проблему? Мое предпочтение - это решение без пользовательского css.

Любое предложение будет оценено по достоинству.

Answer 1

Является this, что вы» вы ищете?

Вы имеете отрицательную маржу и абсолютное позиционирование на кнопку радио:

.radio-inline input[type=radio] { 
    position: absolute; 
    margin-left: -20px; 
} 

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

<label class="radio-inline"> 
    Search by 
</label> 
<label class="radio-inline"> 
    <input type="radio" name="accountsearch" value="name"> 
    Lastname, Firstname 
</label> 
<label class="radio-inline"> 
    <input type="radio" name="accountsearch" value="email"> 
    Email 
</label> 

Answer 2

правила Bootstrap дают радио-кнопки два стиля вы не можете:

.radio-inline input[type="radio"] { 
    position: absolute; 
    margin-left: -20px; 
} 

Вы можете изменить эти правила с этим:

input[type=radio] { 
    position: relative !important; 
    margin-left: 0 !important; 
} 

https://jsfiddle.net/ebwwvy6m/5/