javascript - Bootstrap - 带有两个单选按钮的文本框

Question

我正在创建一个简单的小型 Web 应用程序，但在创建我想要的单选按钮时遇到了一些问题。

我希望用户能够决定他们是要输入美元值(value)还是百分比，然后将用于计算美元值(value)。

我希望输入文本框看起来类似于此示例:

Here is a codepen example:

CodePen Example

如何让单选按钮在 Bootstrap 中彼此重叠？或者我需要求助于自定义 CSS 来完成它吗？

Answer 1

input 元素默认显示为 inline;

您需要使用 display:block 让它们在另一个之上显示。

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

您还需要为这个输入组指定一个特定的类，这样您就可以只使用该类特定的布局，而不是所有的 input-group-addons