Home>

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)

<nav>
     Navbar 
  <button type = "button" data-toggle = "collapse" data-target = "# navbarSupportedContent"
      aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
    <span></span>
  </button>
    
    <ul>
      <li>
           Home<span>(current)</span>
      </li>
      <li>
           Link 
      </li>
      <li>
           Disabled 
      </li>
    </ul>
    <form>
      <input type = "text" placeholder = "Search" aria-label = "Search">
      <button type = "submit">Search</button>
    </form>
    
</nav>


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