Slim：文本字段和按钮在同一高度答案

【问题标题】：Slim: Textfield and button on the same heightSlim：文本字段和按钮在同一高度
【发布时间】：2016-10-18 09:07:12
【问题描述】：

我是苗条的新手，正在努力将文本字段和按钮放在相同的高度。谁能帮帮我？

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')

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap slim-lang

【解决方案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

【讨论】：

感谢您的回答。我已经尝试了您的建议，但没有任何运气。它们不是内联的:(
我认为是因为 div 中心。如果我删除它，它们是内联的，但在左侧。
.center-div 不是引导类，所以我不知道它的作用。 Bootstrap 使用.center-block，但是div 必须有一定的宽度才能居中。
我已经删除了 center-div 并将其放在另一个居中的 css 样式类中。现在在桌面上看起来很棒.. 但在移动设备上却不行:( 文本字段太长了，按钮在下面。

【解决方案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>

【讨论】：