It collapses like this.

Looking back on the work
Install Bootstrap gem on rails

gem'bootstrap-sass', '4.3.1'

Implemented navbar on the top page (also 4.3.1)

  <button type = "button" data-toggle = "collapse" data-target = "# navbarSupportedContent"
      aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
      <input type = "text" placeholder = "Search" aria-label = "Search">
      <button type = "submit">Search</button>

Existing css file changed to scss

/ *
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_ * statement.
 * It is generally better to create a new file per style scope.
 * /
@import "bootstrap-sprockets";
@import "bootstrap";

I expect that Bootstrap is probably installed.
I thought that the display was broken because of asset, but I didn't understand the cause.
I would appreciate it if you could teach me.

  • Answer # 1

    The method of editing an existing css file didn't work.

    I created a new scss file and imported it and it worked.

    @import "bootstrap-sprockets";
    @import "bootstrap";
    gem'bootstrap-sass', '3.4.1'

    Only two files to mess with!

Related articles