0
0

railsにBootstrap導入後の表示が左寄り問題

Posted at

左寄せになっているのを治す方法

Bootstrap導入直後の、
app>views>layouts>application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MyCloset</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

この時 bodyに直接書き込まれているのが左寄せになる原因です。
(左寄せしたい人は直接記入が良いみたいです)

yieldをdivタグで囲み、Bootstrapがコンテンツを管理するcontainerに入れます。

<!DOCTYPE html>
<html>
  <head>
    <title>MyCloset</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <div class="container">
    <%= yield %>
    </div>
  </body>
</html>

これで左寄せ問題は解決です🎵

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0