如何使用引導程序將單選按鈕與輸入字段對齊

-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

如何使用引導程序將單選按鈕與輸入字段對齊

回答

相關問題