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

如果您使用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>

Answer 2

查看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

修身：同一高度的文字字段和按钮

2 个答案: