質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

2回答

464閲覧

navアイコンを右側に表示したい

K-kit

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/07/08 07:40

前提・実現したいこと

開発環境

rails_6.0.0_
ruby 2.6.5

発生している問題

application.html.erbから部分テンプレート作った際に、ビューが崩れました。
投稿・ユーザーのアイコンを右寄せにしたい
イメージ説明

該当のソースコード

application.html.erb

<!DOCTYPE html>

コード

<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"); } } } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決しました。
render上下のnavを消したらいけました

投稿2020/07/08 08:18

K-kit

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

自己解決しました。
render上下のnavを消したらいけました

投稿2020/07/08 08:08

K-kit

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問