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

Question

我正在创建一个简单的小型网络应用，但在创建我想要的单选按钮时遇到了一些麻烦。

我希望用户能够决定是否要输入美元价值或百分比，然后用于计算美元价值。

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

Here is a codepen example:

CodePen Example

如何在引导程序中将单选按钮放在彼此的顶部？或者我是否需要使用自定义css来完成它？

Answer 1

input元素默认显示为inline;

您需要使用display:block来显示另一个。{/ p>

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

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

Answer 2

因为它是BootStrap，所以你总是可以将你的无线电盒包装在这样的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>