Question

a busy cat http://bryancorrell.com/FilterButton.PNG

我能够解决对齐问题，但后来我丢失了输入上的圆角，无法弄清楚如何让它们恢复。请参阅以下链接：

<form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get">
  <div class="form-group select required filter_discipline_id">
    <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id">
      <option value="">- Discipline -</option>
      <option selected="selected" value="1">HW</option>
      <option value="2">SW</option>
    </select>
  </div>
  <div class="form-group">
    <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
  </div>
</form>

<br /><hr /><br />

<div class="input-group">
  <form class="simple_form form-inline" novalidate="novalidate" action="/dashboard/school" accept-charset="UTF-8" method="get">
    <div class="form-group select required filter_discipline_id">
      <select class="select required form-control" placeholder="Discipline" name="filter[discipline_id]" id="filter_discipline_id">
        <option value="">- Discipline -</option>
        <option selected="selected" value="1">HW</option>
        <option value="2">SW</option>
      </select>
    </div>
    <div class="form-group">
      <input type="submit" name="commit" value="Filter" class="btn btn-default btn btn-primary form-control" />
    </div>
  </form>
</div>

生成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”类。不知道如何阻止它。

Answer 1

你在哪里

<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会导致你的问题

在你的小提琴上测试，就像魅力一样;）

Answer 2

在您的情况下，您只需从输入中删除btn类。

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

或者您可以将以下内容添加到您自己的CSS中：

.form-group .btn {
   margin-bottom: 15px;
}

**更新**：在提交错误报告时，我注意到我的边缘向后倾斜。

Answer 3

在课堂上你有一个

apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { applicationId "com.parse.anywall" minSdkVersion 11 targetSdkVersion 23 } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt' } } } dependencies { compile 'com.android.support:support-v4:23.1.0' compile 'com.google.android.gms:play-services:+' compile files('libs/Parse-1.6.0.jar') }

删除该行，它将正确对齐。

Bootstrap输入按钮未与其他字段对齐

3 个答案: