Question

我正在使用Bootstrap 4，并且尝试添加三个单选按钮作为列表，我创建了以下HTML结构：

<div class="mt-3 text-center">
  <div class="custom-control custom-radio">
    <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
    <label class="custom-control-label" for="manualLoading">Foooooo1</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="dateLoading">Foo2</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="periodLoading">Fooooo3</label>
  </div>
</div>

问题是我明白了：

enter image description here

这是JSFIDDLE，我该如何解决？

Answer 1

我建议为此使用默认的Bootstrap 4类。尝试以下代码：

默认电台

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Answer 2

一种可能的解决方案是在新类display:grid中使用content-checkbox并消除类custom-control-label

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .content-checkbox {
               display: grid;
               justify-content: center;
            }
        </style>
    </head>

    <body>
        <div class="mt-3 text-center content-checkbox">
            <div class="custom-control custom-radio">
                <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
                <label class="custom-control-label" for="manualLoading">Foooooo1</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="dateLoading">Foo2</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="periodLoading">Fooooo3</label>
            </div>
        </div>
    </body>
</html>

更新：添加一个名为content-checkbox

的新类

无法将单选按钮垂直对齐

2 个答案: