Kevin Hou   ·  1月前
Exp. 102  ·  2 貼文  ·  8 留言

Bootstrap dropdown button

請問在Boostrap中使用附下拉選單的按鈕時(為了視覺安排,不然框架的dropdown語法更直觀...),除了 html 語法外還需要注意啟用哪些設定嗎? 我是 Rails 使用者,JS跟CSS應該都有引用到了,但按鈕不知為何就是無法生效,在懷疑是不是還要寫JS控制按鈕了@@

我想做到的是這個效果: https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns

我實際寫的html:

<span class="dropdown">
          <button class="btn btn-primary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown">
            ALL TASKS
          </button>

          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">ALL TASKS</a>
            <a class="dropdown-item" href="#">TASK TAGS</a>

          </div>
</span>

application.js中引用的JS:

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap/dropdown
//= require_tree .

application.scss中引用的CSS:

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

使用的Bootstrap主題: https://bootswatch.com/materia/

謝謝!

  分享   共 115 次點閱
共有 5 則留言
Kevin Hou   ·  1月前
Exp. 102  ·  2 貼文  ·  8 留言

啊,剛剛Google了一圈,疑似是 turbolinks 的問題。 晚點試試再來說結果。

 
Kevin Hou   ·  1月前
Exp. 102  ·  2 貼文  ·  8 留言

關了 turbolinks 還是一樣... 我要把它裝回來了。

尤 川豪   ·  1月前
Exp. 1,209  ·  152 貼文  ·  114 留言

如果有疑慮的話,把全部跟 js 相關的都給移掉、關閉,重裝最基本的 Bootstrap 設定,確認沒問題之後,再慢慢一個一個裝回來。

尤 川豪   ·  1月前
Exp. 1,209  ·  152 貼文  ·  114 留言

哈囉,像這種 web framework 預設提供了一些 js 功能,因此懷疑會不會跟自行引入的函式庫起衝突的情況,建議先退幾步,先確保功能的寫法沒錯再說!

以你的情況來說,就先別引入 application.js,手動引入 Bootstrap 相關的東西,然後看能否做出你要的效果。

接著通常會進入其中一種情況:

  1. 還是做不出來,你會發現根本是那個下拉選單你有寫錯某些地方,或其他一開始沒發現的小錯誤
  2. 做出來了,至少確定正確寫法之後,再把 application.js 引入回來

總之要來回測試、debug 一下,寫程式常常會這樣,你再試試看喔!

 
Kevin Hou   ·  1月前
Exp. 102  ·  2 貼文  ·  8 留言

好的我再實驗看看~ 謝謝!

您的留言
Kevin Hou
Exp. 102  ·  2 貼文  ·  8 留言

關於作者

Kevin, a novice Rails developer