Question

我有以下标记：

<div class="container-fluid">
    <h2>Transfer Options:</h2>
    <div class="row  well well-sm">
      <div class="col-xs-6">
        <div id="sendTypeRadio" class="btn-group-vertical" >
          <span class="input-group-addon">
            <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
          </span>
          <span class="input-group-addon">
            <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
          </span>
          <span class="input-group-addon">
            <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-xs-6 -->
    </div>
</div>

问题是按钮在x轴上彼此相邻。我一直在改变一天。将其移出行标签并返回，删除几乎所有格式等。我想要维护的是input-group-addon样式，但我希望每个按钮都在一个新行上。我搜索过什么也没找到任何线索？

Answer 1

在问我的问题时，我想出了一个非常糟糕的答案：

  <div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row  well well-sm">
  <div class="col-xs-6">
    <div id="sendTypeRadio" class="btn-group-vertical" >
      <div class="row">
      <div class="col-xs-2">
      <span class="input-group-addon">
        <input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
      </span>
      </div>
      </div>
      <div class="row">
      <div class="col-xs-2">
      <span class="input-group-addon">
        <input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
      </span>
      </div>
      </div>
      <div class="row">
      <div class="col-xs-2">
      <span class="input-group-addon">
        <input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
      </span>
      </div>
      </div>
    </div><!-- /input-group -->
  </div><!-- /.col-xs-6 -->
</div>

这给了我一个新行的每个项目，但绝对破坏了Bootstrap radio buttons

的样式

如何垂直对齐单选按钮

1 个答案: