html - Bootstrap : display radio button in center of words

Question

我想在两个单词的中间显示单选按钮，但它没有按预期工作。

fiddler : 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>

问题:

单词“by”被隐藏在单选按钮下。

如果我将“搜索依据”文本移到标签之外，则文本和单选按钮不会对齐。

我该如何解决这个问题？我的偏好是没有自定义 CSS 的解决方案。

任何建议将不胜感激。

Answer 1

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/