bootstrap：在单词的中心显示单选按钮

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>

问题：

＆＃39;＆＃39;正在隐藏在单选按钮下。

如果我移动＆＃34;搜索＆＃34;标签外的文本，然后文本和单选按钮没有直线对齐。

我该如何解决这个问题？我的偏好是没有自定义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/

Answer 2

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>