Question

我正试图在收音机的上方或下方标记inline radio in bootstrap。

如果你采用官方的例子，你有：

<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
  </label>
</div>
<div class="form-check form-check-inline">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
  </label>
</div>

我可以做些什么来对齐标签？

编辑：A failed attempt（未对齐，复选框不显示可点击的指针）

Answer 1

form-check-input在您的网页中的重要性或重要性是什么？是否有使用此类执行某些操作的脚本？

我注意到“表单检查输入”定义了-1.25rem的负余量，如果您删除该类或将其替换为form-check-label，它就会很好地对齐。

<div class="container">
  <div class="form-check form-check-inline">
    <label class="form-check-label">
        1 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox1" value="option1">
    </label>
</div>
<div class="form-check form-check-inline">
    <label class="form-check-label">
        2 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox2" value="option2">
    </label>
</div>
<div class="form-check form-check-inline disabled">
    <label class="form-check-label">
        3 <br /><input class="form-check-label" type="checkbox" id="inlineCheckbox3" value="option3">
    </label>
</div>
</div>
<!-- /container -->

DEMO：http://plnkr.co/edit/bs0PWCX1J3Z8XnpdpolN?p=preview

编辑：

当标签文本较长时，上述解决方案并不重要，为了使其工作，我们可以使用bootstrap预定义类text-center并将整个标签元素包装在其中：

<div class="text-center">
    <label class="form-check-label">
        1 <br />
        <input class="" type="checkbox" id="inlineCheckbox1" value="option1">
    </label>
    </div>

更新的演示：http://plnkr.co/edit/CQumOaFUOrm2SSLyc5Ru?p=preview

Answer 2

如果我理解你的问题，你可能想尝试以下方法：

底部对齐：

    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox1" value="option1"><br /> 1
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox2" value="option2"><br /> 2
        </label>
    </div>
    <div class="form-check form-check-inline disabled">
        <label class="form-check-label">
            <input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox3" value="option3"><br /> 3
        </label>
    </div>

顶部对齐：

    <div class="form-check form-check-inline">
        <label class="form-check-label">
            1 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox1" value="option1">
        </label>
    </div>
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            2 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox2" value="option2">
        </label>
    </div>
    <div class="form-check form-check-inline disabled">
        <label class="form-check-label">
            3 <br /><input class="form-check-input" style="cursor: pointer;" type="checkbox" id="inlineCheckbox3" value="option3">
        </label>
    </div>

内联广播标签上/下

2 个答案: