带有标签 up/down 的内联收音机

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

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

底部对齐方式：

    <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>

Answer 2

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

我注意到 "form-check-input" 定义了 -1.25rem 的负边距，如果您删除 class 或用 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 -->

演示版：http://plnkr.co/edit/bs0PWCX1J3Z8XnpdpolN?p=preview

编辑：

当标签文本较长时，上述解决方案不会使内容居中，要使其工作，我们可以使用 bootstrap 预定义 class 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

带有标签 up/down 的内联收音机

Inline radio with label up/down

html

css

twitter-bootstrap

twitter-bootstrap-4