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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1208閲覧

navbar-brandの大きさによって、折り返してしまいます。

shumbow

総合スコア35

Ruby on Rails 5

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/04/25 10:36

編集2019/04/25 12:48

前提・実現したい

rails5, bootstrap4で開発をしていて、navbarを使っているのですが、色々とピンとこないことが多いので教えていただきたいです。今回の問題は、ブランドが4文字の時はどこまでスクロールしてもレイアウトが崩れないのですが、10文字近くになるとnavbarが二段になってしまいます。要素が画面の幅を超えてしまう時、折り返さずに要素を小さくしてくれるような設定はありますでしょうか?
ブランドが大きい
↑折り返して崩れてしまっている。。

![ブランドが小さい]
↑要素が画面内に収まれば問題ない。

また、そもそもの質問なのですが、自分のコードのように,container-fluidクラスにd-flexをつけたり、さらにその次ではd-flexの中にd-flex-inlineを使ったりなど、こういった入れ子的なことはやってもだいちょうぶなのでしょうか?
色々とごちゃごちゃしてしまい申し訳ありませんが、詳しい方ぜひご教授ください。

該当のソースコード

<!DOCTYPE html> <html> <head> <title> <%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head> <body> <div class="container-fluid dflex nowrap"> <nav class="navbar navbar-expand-md navbar-light fixed-top p-1" style="background-color: #e3f2fd;">
<%= link_to 'ブランドaaaaaaa', root_path, alt: 'サイトのロゴ', class: "navbar-brand ml-4" %> <div class="d-flex flex-column"> <span class="navbar-text font-weight-lighter" style="font-size: 10px;"> 登録不要!今がチャンス! </span> <div class="d-flex-inline"> <%= link_to "会員登録なしで申し込む", "#", style: "font-size: 10px" %> <%= link_to "ログイン", "#", class: "btn btn-primary" %> <%= link_to "新規登録", "#", class: "btn btn-primary" %> </div> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-sm-around" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item mx-2 <%= 'active' if current_page?(root_path) %>"> <%= link_to(root_path, class: "nav-link") do %>TOP<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(root_path) %> <% end %> </li> <li class="nav-item mx-2 <%= 'active' if current_page?(main_pages_help_path) %>"> <%= link_to(main_pages_help_path, class: "nav-link") do %>お問い合わせ<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(main_pages_help_path) %> <% end %> </li> <li class="nav-item mx-2"> <%= link_to "キャンペーン情報", "#", class: "nav-link" %> </li> </ul> </div> </nav> </div> <div class="container"> <%= yield %> </div>
</body> </html> ```ここに言語名を入力 ソースコード
### 試したこと 一応、.d-flex .nowrap を持った親クラスをセットしたりしてみたのですが、変化なしです。 ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

ブレークポイントごとにorder属性をつけることでうまくいきました。

erb

1<nav class="navbar navbar-expand-md navbar-light fixed-top p-1" style="background-color: #e3f2fd;"> 2 3 4 <%= link_to 'ブランドaaaaaaa', root_path, alt: 'サイトのロゴ', class: "navbar-brand ml-4" %> 5 <div class="d-flex flex-column order-sm-1 order-md-2"> 6 <span class="navbar-text font-weight-lighter" style="font-size: 10px;"> 7 登録不要!今がチャンス! 8 </span> 9 <div class="d-flex-inline"> 10 <%= link_to "会員登録なしで申し込む", "#", style: "font-size: 10px" %> 11 <%= link_to "ログイン", "#", class: "btn btn-primary" %> 12 <%= link_to "新規登録", "#", class: "btn btn-primary" %> 13 </div> 14 15 </div> 16 17 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 18 <span class="navbar-toggler-icon"></span> 19 </button> 20 21 <div class="collapse navbar-collapse order-sm-2 order-md-1" id="navbarNav"> 22 <ul class="navbar-nav"> 23 <li class="nav-item mx-2 <%= 'active' if current_page?(root_path) %>"> 24 <%= link_to(root_path, class: "nav-link") do %>TOP<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(root_path) %> <% end %> 25 </li> 26 <li class="nav-item mx-2 <%= 'active' if current_page?(main_pages_help_path) %>"> 27 <%= link_to(main_pages_help_path, class: "nav-link") do %>お問い合わせ<%= (content_tag :span, "(current)", :class => "sr-only") if current_page?(main_pages_help_path) %> <% end %> 28 </li> 29 <li class="nav-item mx-2"> 30 <%= link_to "キャンペーン情報", "#", class: "nav-link" %> 31 </li> 32 </ul> 33 </div> 34</nav>

投稿2019/04/30 21:39

shumbow

総合スコア35

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問