Ruby Rails- 模型视图以某种方式成为导航栏的一部分

Question

我是 RoR 的新手。在这个应用程序中，我有一个名为 Clubs 的模型，顶部有一个导航栏。但是，由于某些原因，在呈现应用程序时，Clubs 的每个视图都会成为导航栏的一部分。这是一个屏幕截图，向您展示我的意思：

这是我的代码：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BHSClubs</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Brookline High School</a>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                        <ul class="navbar-text pull-right">
                            <% if user_signed_in? %>
                            Logged in as <strong><%= current_user.email %></strong>.
                            <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
                            <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link'  %>
                            <% else %>
                            <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link'  %> |
                            <%= link_to "Login", new_user_session_path, :class => 'navbar-link'  %>
                            <% end %>
                            <% if notice %>
                            <p class="alert alert-success">
                                <%= notice %>
                            </p>
                            <% end %>
                            <% if alert %>
                            <p class="alert alert-danger">
                                <%= alert %>
                            </p>
                            <% end %>
                            <%= yield %>
                        </ul>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </div>
    </body>
</html>

显示方法

<div class="container">

<div class="row">

    <div class="col-md-3">
        <p class="lead">
            <%= @club.name %>
        </p>
        <div class="list-group">
            <a href="#" class="list-group-item active">Information</a>
            <a href="#" class="list-group-item">Announcements</a>
        </div>
    </div>

    <div class="col-md-9">

        <div class="thumbnail">
            <img class="img-responsive" src="http://placehold.it/800x300" alt="">
            <div class="caption-full">
                <p id="notice">
                    <%= notice %>
                </p>

                <p>
                    <h4>Name:</h4>
                    <%= @club.name %>
                </p>

                <p>
                    <strong>Description:</strong>
                    <%= @club.description %>
                </p>

                <p>
                    <strong>Location:</strong>
                    <%= @club.location %>
                </p>

                <p>
                    <strong>Picture:</strong>
                    <%= image_tag(@club.picture_url, :width => 600) if @club.picture.present? %>
                </p>

                <%= link_to 'Edit', edit_club_path(@club) %> |
                <%= link_to 'Back', clubs_path %>
            </div>
        </div>

    </div>

</div>

感谢任何帮助。

Answer 1

您正在应用程序导航栏内呈现您的俱乐部 <%= yield %>！因此您必须将 <%= yield %> 放在导航元素之外，在另一个 bootstrap .container 内元素.

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BHSClubs</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brookline High School</a>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                        <ul class="navbar-text pull-right">
                            <% if user_signed_in? %>
                            Logged in as <strong><%= current_user.email %></strong>.
                            <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %> |
                            <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link'  %>
                            <% else %>
                            <%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link'  %> |
                            <%= link_to "Login", new_user_session_path, :class => 'navbar-link'  %>
                            <% end %>
                            <% if notice %>
                            <p class="alert alert-success">
                                <%= notice %>
                            </p>
                            <% end %>
                            <% if alert %>
                            <p class="alert alert-danger">
                                <%= alert %>
                            </p>
                            <% end %>
                        </ul>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <%= yield %>
                </div>
            </div>
        </div>
    </body>
</html>

Ruby Rails- 模型视图以某种方式成为导航栏的一部分

Ruby on Rails- Model Views Somehow Become Part of Navigation Bar

html

css

layout

ruby-on-rails

twitter-bootstrap