bootstrap4 CSS レスポンシブにヘッダーの配置を決める。

Question

bootstrap4を使用していてヘッダーのロゴをうまく配置する方法がわからず、質問しました。

「実現したいこと」
このCHELLS KITCHENというロゴを中華だしのボックスの左端にmenuというドロップダウンメニューを本出しの右端に設定したいです。
直接marginを設定する方法もありますが、下の中華だし、ほんだしはbootstrapを使用してレスポンシブデザインにしているため、位置が変動します。具体的にはclass="col-md-6"を使用し、768px以上では2つ横に配置し、それ以下の場合は縦に積んでいるデザインにしています。このレスポンシブデザインの設定に依存したヘッダーの構成にしたいと考えています。

ソースコードは以下です。

_header.html.erb
<header>
　　#画像
   <nav class="navbar navbar-light mb-2" style="background-color:#cc2931;">
      <a class="navbar-brand" href="/">
         <img src="/assets/CHELLS-KITCHEN.png" alt="header-logo">
      </a>
　　#ドロップダウンメニュー
   <div class="dropdown">
      <a class="btn btn-danger btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         menu
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdoenMenuLink">
         <% if user_signed_in? %>
            <%= link_to "購入", new_flavor_path, method: :get, class: "dropdown-item"%>
            <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item"%>
            <%= link_to "マイページ", user_path(current_user), class: "dropdown-item"%>
         <% else %>
            <%= link_to "ログイン", new_user_session_path, class: "dropdown-item" %>
         <% end %>
         <%= form_tag(search_flavors_path,:method => 'get') do %>
           <%= text_field_tag :search %>
           <%= submit_tag 'Search', :name => nil %>
         <% end %>
      </div>
   </div>
   </nav>

index.html.erb
<div class="container">
   <div class="row">
　　　#繰り返し処理をしてDBにあるflavorを表示しています。（中華だしと本だしの部分）
      <% @flavors.each do |flavor| %>
         <div class="col-md-6">
            <div class="box rounded-lg shadow">
               <p class="flavor"><%= flavor.name %></p>
               <%= link_to image_tag(@StatusImage[flavor.status]), edit_flavor_path(flavor), remote: true, class: "StatusImage" %>
            </div>
         </div>
      <% end %>
   </div>
</div>
<%= paginate(@flavors) %>
<div id="flavor-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>

デザインも微妙ですし、コードにも不備がたくさんあるかもしれません。
お力添えいただければ幸いです。
よろしくお願いします。

Answer 1

中華だし、ほんだしをcontainerクラスのブロックで囲んでいるので、
navブロックも同様に containerクラスのブロックで囲めばいいでしょう。

<header style="background-color:#cc2931;">
  <div class="container">
    <nav class="navbar navbar-light mb-2">
      <a class="navbar-brand" href="/">
        <img src="/assets/CHELLS-KITCHEN.png" alt="header-logo">
      </a>
      <div class="dropdown">
        <a class="btn btn-danger btn-sm dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          menu
        </a>
      </div>
    </nav>
  </div>
</header>

Comments

[kosuke_ikeura]

早速の回答ありがとうございます！
ご指摘通りにやったところ解決しました！
ありがとうございました！！