2017-10-27 15 views
0

Railsnoob here。私のアプリではブートストラップの崩壊が適切に機能していません。私は新鮮作成し、レールのアプリでそれを試してみましたが、それはまた、働いていない:Rails5ブートストラップの崩壊が機能しない

source 'https://rubygems.org' 

gem 'rails' 
gem 'bootstrap-sass' 
gem 'puma' 
gem 'sass-rails' 
gem 'uglifier' 
gem 'coffee-rails' 
gem 'jquery-rails' 
gem 'turbolinks' 
gem 'jbuilder' 

group :development, :test do 
    gem 'sqlite3' 
    gem 'byebug' 
end 

group :development do 
    gem 'web-console' 
    gem 'listen' 
    gem 'spring' 
    gem 'spring-watcher-listen' 
end 

group :test do 
    gem 'rails-controller-testing' 
    gem 'minitest-reporters' 
    gem 'guard' 
    gem 'guard-minitest' 
end 

group :production do 
    gem 'pg' 
end 

アプリ/資産/スタイルシート/ custom.scss:

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

アプリ

私のGemfileは、このようになります/views/pages/home.html.erb これは、ブートストラップ崩壊のドキュメントの最初の例が含まれています

<h1>Pages#home</h1> 
<p>Find me in app/views/pages/home.html.erb</p> 

<p> 
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Link with href 
    </a> 
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
    Button with data-target 
    </button> 
</p> 
<div class="collapse" id="collapseExample"> 
    <div class="card card-body"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
    </div> 
</div> 

なぜ動作しないのか分かりません。私は宝石が欠けていますか?

編集:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

と身体の終わりにこのライン:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
見つかりソリューション、Ishwar Deoolkar :)のおかげで

は、私は頭の中で次の行を追加しました

答えて

1

あなたのプロジェクトフォルダにbootstrap.jsとjquery.jsを含めましたか?

ブートストラップのJs:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " のjQueryのJS:https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"

同じ問題が私のコードになっていた、アコーディオンは、ブートストラップによる働いていませんでした。しかし、私のプロジェクトフォルダに上記のリンクを含めた後、それは私のために働いています。これを試してください

+0

ありがとう、これは解決策でした。ブートストラップを含めることで十分でした;) – winterwolff

関連する問題