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

Question

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

Overlapping Radio buttons with text.

此外，您可以看到文本向下，而不是覆盖所有bootstrap 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
}