【发布时间】：2019-01-13 16:06:38
【问题描述】：
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<input id="show_imagery_buttons" type="checkbox">
<label for="show_imagery_buttons">
<span data-toggle="tooltip"
title="Check to request an additional image type"><b>Additional Imagery</b>
</span>
</label>
<ul id="imagery_buttons">
<li class="radio">
<label><input type="radio" id="addImgPng" name="imagery"
value="png">PNG</label>
</li>
<li class="radio">
<label><input type="radio" id="addImgJpg"
name="imagery" value="jpg">JPG</label>
</li>
<li class="radio"><label><input type="radio" id="addImgPdf"
name="imagery"
value="pdf">PDF</label>
</li>
</ul>
</div>
<div class="col-md-6 text-center">
<input id="show_dataset_buttons" type="checkbox">
<label for="show_dataset_buttons">
<span data-toggle="tooltip"
title="Check to request another report format"><b>Additional Report Format</b>
</span>
</label>
<ul id="dataset_buttons">
<li class="radio"><label><input type="radio" id="addDataPDF"
name="report"
value="pdf">PDF</label>
</li>
<li class="radio"><label><input type="radio" id="addDataNLatex"
name="report"
value="latex">LaTeX</label></li>
</ul>
</div>
</div>
</div>
我有两摞单选按钮，我想将它们并排显示。我想将它们隔开，使它们位于行的中间，在这些无线电块的外侧具有相等的空白。我已将它们放在两个引导列上，并设法使用 text-center 类将它们保持在列的中间 (see this fiddle)
虽然随着窗口大小的移动，这确实使按钮保持在引导列的中间，但我无法让单选按钮彼此垂直对齐。我认为这与使用 text-center 类有关，但我不确定用什么替换它。有人有什么想法吗？
【问题讨论】：
-
您希望单选按钮水平堆叠还是垂直堆叠？您在帖子中提到：“我无法让单选按钮彼此垂直对齐。”当它垂直对齐时。
-
我希望它们彼此垂直且“正方形”。理想情况下，单选按钮会垂直排列在一起。