苗条：文本框和按钮在同一高度

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，您应该使用 class 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>

Answer 2

查看 bootstrap's inline forms，您必须对 "main parent" 使用 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

苗条：文本框和按钮在同一高度

Slim: Textfield and button on the same height

css

ruby-on-rails

twitter-bootstrap

slim-lang