【问题标题】:Why is this appended bootstrap button misaligned?为什么这个附加的引导按钮没有对齐?
【发布时间】:2016-08-28 17:26:32
【问题描述】:

我正在尝试复制 this 示例。但是我得到以下结果:

我的代码(index.html.erb):

<%= form_tag "/search", method: "post" do %>
    <div class="col-lg-6">
        <div class="input-group">
            <%= text_field_tag :txt, nil, placeholder: "Enter text", class: "form-control" %>
                    <span class="input-group-btn">
                            <%= submit_tag "Go", class: "btn btn-default" %>
                    </span>
            </div>
    </div>

我的 Gemfile 的一部分显示了相关的 gem:

# Saas rails
gem 'sass-rails', '>= 3.2'
# Bootstrap
gem 'bootstrap-sass', '~> 3.3.6'
# Autoprefixer - Automatically adds the proper vendor prefixes to your CSS code when it is compiled (optional)
gem 'autoprefixer-rails'

在 app/assets/stylesheets/application.css.sass 中导入 Bootstrap:

@import "bootstrap-sprockets"
@import "bootstrap"

目前已在 Chrome 和 Firefox 中尝试过。

【问题讨论】:

  • 你的代码是对的......你有任何链接你有这个代码,所以我可以看看..
  • 谢谢。实际上这就是它,我的索引页面的整个视图。会不会是浏览器的问题?

标签: css ruby-on-rails twitter-bootstrap erb bootstrap-sass


【解决方案1】:

试试这个:

<%= form_tag "/search", method: "get" do %>
 <div class="col-lg-6">
  <div class="input-group">
    <%= text_field_tag :txt, nil, class: 'form-control', placeholder: 'Enter text' %>
   <span class="input-group-btn">
     <%= button_tag( :class => "btn btn-default") do %>
        Go!
     <% end %> 
   </span>
  </div>
 </div>
<% end %>

如果这不起作用,请尝试将方法设为 :Post....让我知道。

【讨论】:

  • 谢谢。不过看起来完全一样。啊,是的,当然它的帖子可能是错误的复制粘贴。
  • @Michael:也许你错过了 %end% 部分……不管怎样,它有用吗??
  • 不幸的是它不起作用(与上面一样,包括 %end% 部分)。我得到了它的工作,检查我的答案。它肯定看起来没有优化,但它正在工作。
【解决方案2】:

不确定是否需要以下所有内容,但至少现在可以使用!

<%= form_tag "/search", method: "post" do %>
   <div class="col-lg-6">
       <div class="input-group input-group-lg">
           <span class="input-group-btn input-group-lg">
               <%= text_field_tag :txt, nil, placeholder: "Enter text", class: "form-control" %>
           </span>
           <span class="input-group-btn input-group-lg">
               <%= submit_tag "Go", class: "btn btn-default" %>
           </span>
       </div>
    </div>
<% end %>

接受的答案here 有帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-10-18
    • 1970-01-01
    • 1970-01-01
    • 2022-10-07
    • 1970-01-01
    • 2019-01-21
    • 1970-01-01
    • 2017-08-03
    相关资源
    最近更新 更多