Slim: Текстовое поле и кнопка на той же высоте

Question

Я новичок в slim и борется с получением текстового поля и кнопки на одной высоте. Может кто-нибудь мне помочь?

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

Глядя на bootstrap's inline forms, вы должны использовать form-inline к «основной родитель», чтобы сделать эти элементы инлайн и добавить form-group к input элементу родитель. Таким образом, это должно выглядеть.

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

Если вы используете Bootstrap, вы должны создать строковую форму с классом form-inline, или даже input-group присоединиться ввод и кнопками вместе.

Вот документация: для встроенных форм и входных групп: 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>