前提・実現したいこと
開発環境
rails_6.0.0_
ruby 2.6.5
発生している問題
application.html.erbから部分テンプレート作った際に、ビューが崩れました。
投稿・ユーザーのアイコンを右寄せにしたい
該当のソースコード
application.html.erb
コード
<html> <head> <title>aaa</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <nav class="navbar navbar-expand-lg navbar-light"> <%= render 'partial/navbar' %> </nav> <%= yield %> </body> </html> ### 該当のソースコード `_navbar.html.erb` <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <%= link_to "", root_path, class: "navbar__brand navbar__mainLogo" %> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-md-auto align-items-center"> <li> <%= link_to "投稿", "#", class: "btn btn-primary" %> </li> <li> <%= link_to "", "#", class: "nav-link commonNavIcon profile-icon" %> </li> </ul> </div> </div> </nav> ### 該当のソースコード `navbar.scss` .navbar { background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, .0975); height: 77px; &__brand { height: 35px; width: 176px; background-size: 114px; } &__mainLogo { background-repeat: no-repeat; background: url("logo.png"); background-size: cover; } &-nav { & > li { margin-left: 20px; &:first-child { margin-left: 0; } .commonNavIcon { height: 24px; width: 24px; background-size: 22px !important; background-repeat: no-repeat; } .profile-icon { background-image: url("parts3.png"); } } } }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。