スリム：同じ高さのテキストフィールドとボタン

Question

私はスリムで新しく、同じ高さのテキストフィールドとボタンを得るのに苦労しています。誰でも助けてくれますか？

div class="center-div"  
    = text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg' 
    button class="btn btn-primary" onclick="SubmitForm()" = t('code.submit') 

Answer 1

、あなたはそれらの要素がインラインにするために、「メイン親」にform-inlineを使用する必要がありますし、input要素にform-groupを追加します親。そう、それはのように見えるはずです。答えるため

div class="center-div form-inline" 
    .form-group 
    = text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg' 
    button class="btn btn-primary btn-lg" onclick="SubmitForm()" = t('code.submit') 

Here's a bootply of a similar markup

Answer 2

あなたはブートストラップを使用する場合は、クラスform-inlineとインラインフォームを作成する必要があり、あるいはinput-groupは一緒に入力し、ボタンを参加させます。ここで

はドキュメントです：インラインフォームと入力グループのために：bootstrap's inline formsを見てhttp://getbootstrap.com/css/#forms-inline

<form class="form-inline"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
    <div class="input-group"> 
     <div class="input-group-addon">$</div> 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
     <div class="input-group-addon">.00</div> 
    </div> 
    </div> 
    <button type="submit" class="btn btn-primary">Transfer cash</button> 
</form>