Css 引导输入按钮未与其他字段对齐

（来源：）

我能够解决对齐问题，但随后我丢失了输入的圆角，无法找到如何恢复它们。请参阅下面的链接：

-纪律-
硬件
西南



-纪律-
硬件
西南

生成HTML表单的Ruby代码：

<%= minimal_form_for :filter, url: @form_path, method: :get, html: {class: 'form-inline' } do |f| %>
<%= f.error_notification %>
<%= f.input :discipline_id, 
  collection: Discipline.all, 
  include_blank: '- Discipline -', 
  selected: params[:discipline_id] %>
<div class="form-group">
    <%= f.button :submit, 'Filter', class: "btn-primary form-control" %>
</div>

---

看起来simple_form正在注入“btn”类。不知道该如何停止。

在课程btn上，您有一个

页边距底部：0px

删除该行，它将正确对齐。
在类btn上，您有一个

页边距底部：0px

拆下那条线，它将正确对齐。
在您需要的位置

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
</div>



取而代之

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn-primary form-control" />
</div>



不需要多次调用这些类，在这种情况下，.btn会导致您的问题

在你的小提琴上测试，效果很好；）
 你在哪里

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
</div>



取而代之

<div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn-primary form-control" />
</div>



不需要多次调用这些类，在这种情况下，.btn会导致您的问题

在你的小提琴上测试，效果很好；）
 在您的情况下，只需从输入中删除
btn
类即可

<input type="submit" name="commit" value="Filter" class="btn-primary form-control" />

**更新**：在提交错误报告时，我注意到我的页边距底部向后。
在您的情况下，您只需从输入中删除
btn
类即可

<input type="submit" name="commit" value="Filter" class="btn-primary form-control" />

**更新**：在提交错误报告时，我注意到页边距底部向后。
感谢您的回复-我在哪里有“页边距底部：0px；”？它在您的引导css文件中。我只是导入引导，所以我无法真正更改它的实现：导入“引导链轮”；导入“引导”；我总是建议你上传你自己的库。实际上，我认为使用公共托管库（例如cloudfare和google）有很多好处。有这么多网站使用引导，用户可能已经缓存了引导css，而不需要加载它。在Rails的例子中，它从所有源代码生成一个css文件，这可能没有帮助，但我不认为有理由维护我自己的bootstrap副本。我控制gemfile中的版本，因此它不会更改，除非我允许。我想我同意Victoria的观点，这看起来像是一个引导错误。感谢您的回复-我在哪里有“margin bottom:0px；”？它在您的引导css文件中？我只是导入引导，所以我不能真正更改它的实现：导入“引导链轮”；导入“引导”；我总是建议你上传你自己的库。实际上，我认为使用公共托管库（例如cloudfare和google）有很多好处。有这么多网站使用引导，用户可能已经缓存了引导css，而不需要加载它。在Rails的例子中，它从所有源代码生成一个css文件，这可能没有帮助，但我不认为有理由维护我自己的bootstrap副本。我控制gemfile中的版本，因此它不会更改，除非我允许。我想我同意Victoria的观点，这看起来像是一个引导错误。感谢您的回复-这些类是重复的，因为我在默认情况下将class=“btn btn default”放在按钮上。我删除了我的“btn”注射，但我如何停止简单的形式？我在上面添加了我的Ruby/Rails代码-很抱歉最初没有包含它。我对Ruby/Rails或simple_form一无所知，但是，你能像“f.input”一样传递“f.button”看看会发生什么吗？好主意-我稍微做了些手脚，看起来f.submit没有注入class=“btn”：感谢您的回复-这些类是重复的，因为我简单的表单在默认情况下将class=“btn btn default”放在按钮上。我删除了我的“btn”注射，但我如何停止简单的形式？我在上面添加了我的Ruby/Rails代码-很抱歉最初没有包含它。我对Ruby/Rails或simple_form一无所知，但是，你能把“f.button”像“f.input”一样传递给我看看会发生什么吗？好主意-我做了一些手脚，看起来f.submit没有注入class=“btn”：是的，这有点烦人，因为simple_form添加了class=“btn”我不确定如何阻止这种情况。我建议选择第二种方法。为你的应用程序创建一个css文件（如果你还没有），并在上面添加css。Bootstrap可能会像我做的那样修复它，并且在以后的更新中您不会注意到任何不良影响。我甚至可能会亲自发布更改。只是花了相当多的时间用bootstrap解决这个问题。您正在使用的css不是纯粹的引导。看起来，多个css文件被合并在一起，并且在引导代码之后添加了一个css重置，这改变了引导的行为方式。如果没有这些重置，引导代码将按预期工作。Bootstrap没有在输入或选择元素上设置15px的边距底部。是的，这有点烦人，因为simple_form添加了class=“btn”，我不确定如何停止。我建议使用第二个选项。为你的应用程序创建一个css文件（如果你还没有），并在上面添加css。Bootstrap可能会像我做的那样修复它，并且在以后的更新中您不会注意到任何不良影响。我甚至可能会亲自发布更改。只是花了相当多的时间用bootstrap解决这个问题。您正在使用的css不是纯粹的引导。看起来，多个css文件被合并在一起，并且在引导代码之后添加了一个css重置，这改变了引导的行为方式。如果没有这些重置，引导代码将按预期工作。引导不会在输入或选择元素上设置15px的边距底部。