css - 在 Bootstrap radio-inline 列表中显示输入文本

Question

我在 Bootstrap 3.3.5 设置中有一些单选按钮。如果某个单选按钮被选中，则可能会填写一个额外的输入字段。因此我想把它放在那个单选按钮附近。这样做的好方法是什么？无论我将它放在 label 还是 li 中 - 它总是在显示之前有一个中断并中断 radio 的内联显示。

        <ul class="list-inline">

            <li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp1" value="1"> Radio 1
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp6" value="6"> Radio 6
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp7" value="7"> Radio 7
                    <input type="text" name="txt1" class="form-control col-xs-1">
                </label>
            </li><li>
                <label class="radio-inline">
                    <input type="radio" name="rdoInp" id="rdoInp8" value="8"> Radio 8
                </label>
            </li>

        </ul>

与问题 add text input to inline radio buttons 中的回答不同我在 .form-horizo​​ntal 公式中吗？

fiddle :http://www.bootply.com/F57p30Eyo2

Answer 1

这看起来像是您如何在容器而不是列表上设置网格系统的问题。您在包含的 div 上有“col-sm-4”。如果将其更改为“col-sm-12”，它会内联显示文本输入字段。

作为如此狭窄的列的一部分，该元素根本无法与所有其他元素内嵌。例如，将“width: 50px”应用到文本字段也会使其内联。