css - 如何在 Twitter-bootstrap for rails 中创建后缀按钮？

Question

我最近从 Foundation Zurb 切换到 Twitter bootstrap for Rails。

并且在 Foundation Zurb 中，已在现有选项中提供了后缀按钮，而 twitter-bootstrap-rails 则不是这种情况。

我试过这样做

<div class="col-sm-2">
    <f.text_area :search, :class => "text_area">
    <%= button_tag "name", type: 'button', class: "btn btn-info"%>
</div>

但我似乎甚至无法靠近它。

谁能提供一些有用的方法来做到这一点？

Ps : 对于那些不知道什么是后缀按钮的人来说，它与 Youtube 中的按钮完全一样，例如在搜索栏旁边。检查这个link并向下滚动到修复前/后修复按钮，您就会明白我在说什么。

======================================

按照@Sadik 的要求查看我的 gemfile

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.2'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use SCSS for stylesheets
gem 'less-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'
# User ActiveModel act_as_list
gem 'acts_as_list', '~> 0.4.0'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

#Use ActiveModel geocoded_by :address after_validation :geocode
 gem 'geocoder'

#User SCSSS for Stylesheets
 gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'

=============================================

更新 #1:已解决

感谢下面的答案，但不是真正的答案，感谢指定我应该更新到正确版本的 twitter-bootstrap 的评论。

如果您遇到同样的问题，请转到您的 gemfile 并编写

 gem 'twitter-bootstrap-rails', github: 'seyhunak/twitter-bootstrap-rails', branch: 'bootstrap3'

然后 bundle install 和 Absolutely 然后 rails g bootstrap:install less 到你已经知道的故事的结尾。

如需进一步支持，请查看此 link

Answer 1

我想 Bootstrap 输入组插件就是您正在寻找的将代码更改为

<div class="col-sm-2 form-group">
  <div class="input-group">
    <%= f.text_field :search, :class => "form-control" %>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
    </span>
  </div>
</div>

这是 jsfiddle:http://jsfiddle.net/monideeps99/2Ag3g/