Question

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

我有两个要相邻显示的单选按钮堆栈。我想将它们隔开，以使它们位于这些收音机块外侧相等的空白行中。我将它们放在两个引导程序列中，并使用文本中心类（see this fiddle）设法将它们保留在列的中间

尽管这确实会在窗口大小移动时将按钮保留在引导程序列的中间，但我无法使单选按钮彼此垂直对齐。我认为这与使用文本中心类有关，但是我不确定用什么替代它。有人有什么想法吗？

Answer 1

您是正确的，您的text-center类正在影响单选按钮及其标签的对齐方式。您还应用了hide类，使第二组单选按钮不可见。删除这些按钮将获得两列左对齐的单选按钮。请注意，引导栏会随着屏幕尺寸的调整而调整，因此您可能只能在较大的屏幕的两列中看到它们。

#imagery_buttons, #dataset_buttons {
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <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">
      <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>

在Bootstrap网格的中心水平对齐堆叠的单选按钮

1 个答案: