如何使用引导程序将单选按钮与输入字段对齐

Question

目前我有3个单选按钮，我试图使用bootstrap放置在我的2个输入字段旁边。我想将它们放在与输入字段相同的行中，但它会不断与这些输入字段的标签对齐。

任何人都知道如何减少对齐？

我的HTML：

<div class="container">
      <div class="row">
        <div class="form-group col-xs-5">
          <label for="costDescription">Description</label>
          <input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
      </div>
      <div class="form-group col-xs-2">
        <label for="cost">Amount</label>
        <input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
      </div>

        <label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
        <label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
        <label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
      </div>

这是我的傻瓜： https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/

Answer 1

为什么不更改单选按钮的代码如下：

<div class="form-group col-xs-5" style="margin-top:40px">
    <label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
    <label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>

将其添加到列中，然后向其添加margin-top css样式

Answer 2

没有额外的课程。只是一些HTML更改。使用另一列单选按钮：

<div class="container">
  <div class="row">
    <div class="col-sm-5">
      <label for="costDescription">Description</label>
      <input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
      Hello
    </div>
    <div class="col-sm-2">
      <label for="cost">Amount</label>
      <input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
    </div>
    <div class="col-sm-5">
      <label class="radio-inline"><input type="radio" name="optradio"> Option 1 </label><br />
      <label class="radio-inline"><input type="radio" name="optradio"> Option 2 </label><br />
      <label class="radio-inline"><input type="radio" name="optradio"> Option 3 </label>
    </div>
  </div>
</div>

预览

删除<br />会为您提供：