在 bootstrap col 中使用单选按钮重叠文本

Question

我有一个添加了 .html 的单选按钮。但结果是与单选按钮重叠的文本。

Overlapping Radio buttons with text.

您还可以看到文本向下而不是覆盖所有引导程序 col-4 、 col-4 、 col-4。

function addQAs() {
    randQuestion = Math.floor(Math.random() * library.length); //this is a nuber, dont forget!
    console.log(randQuestion);
    $("#question").html(library[randQuestion].question);
    $("#answer1").html(library[randQuestion].answer[0]);
    $("#answer2").html(library[randQuestion].answer[1]);
    $("#answer3").html(library[randQuestion].answer[2]);
}

<div class="container-fluid">
        <form>
            <div class="row">
                <div class="col-4">
                    <input type="radio" id="answer1" value="answer1" index="0">
                    <label for="answer1"></label>
                </div>
                <div class="col-4">
                    <input type="radio" id="answer2" value="answer2" index="1">
                    <label for="answer2"></label>
                </div>
                <div class="col-4">
                    <input type="radio" id="answer3" value="answer3" index="2">
                    <label for="answer3"></label>
                </div>
            </div>
        </form>
    </div>

我没有为这个问题尝试过任何 CSS。

谢谢

Answer 1

尝试添加这个 css

.col-4 {
  position: relative;
}
input[type="radio"] {
  position: absolute;
  left: -15px; // set as per your requirement
  top: 5px; // set as per your requirement
}