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

-1

当前我有3个单选按钮，我尝试使用引导程序放在我的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>

这里是我的plunkr： https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/

来源

2017-04-21 jeremy

如果你有3个收音机，但只有2个输入全部在一行中...以什么顺序？ ''？或''？或者是其他东西？ – zer00ne

为什么不改变代码，其中单选按钮如下：

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

来源

2017-04-21 14:01:47 Sphinx

嗯，试图做到这一点，没有太多的自定义CSS ...看我是否可以使用默认引导类 – jeremy

@jeremy检查我的答案。没有额外的课程。只是一些HTML更改。 –

[看这个链接]（http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows），它表明你最好使用自定义的CSS，因为bootstrap不只是一个适合所有的一个 – Sphinx

没有额外的类。只是一些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 />会给你这样的：

来源

2017-04-21 14:04:22

嗯使用无线电在线bc我想单选按钮并排...我认为这一个堆叠他们 – jeremy

@jeremy我明确给了'
'。除此之外，它将成为一条线。 –

@jeremy只是删除我的风格，你明白了。唯一的问题是，它会显示内嵌的标题 – Sphinx

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

回答

相关问题