Question

所以在我的application.html.erb中，我的整个网页都有一个基本格式

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

并且只在我的一个页面上我想覆盖width属性。我的index.html.erb页面中是否有任何方法可以覆盖上层CSS "container"？或者我是否必须更改我的application.html.erb？

Answer 1

当然，您只需要在标记中添加一些标识符，例如

<!-- app/views/layouts/application.html.erb -->
<body class="<%= body_classes %>">
  <div class="container">
    <%= yield %>
  </div>
</body>

并像这样定义帮助器：

# app/helpers/layout_helper.rb
module LayoutHelper
  def body_classes
    "controller-#{controller_name} action-#{action_name}"
  end
end

最后定义你的CSS：

/* app/assets/stylesheets/application.css */
.container {
  width: 80em;
}
body.controller-foo.action-show .container {
  width: 100%;
}

controller-foo / action-show表示所需的视图，在此示例中为FooController#show。

或者，您可以创建一个单独的布局，例如app/views/layouts/wide.html.erb：

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

/* app/assets/stylesheets/application.css */
.container {
  width: 80em;
}
.container.wide {
  width: 100%;
}

并在您的控制器中使用它：

# app/controllers/foo_controller.rb
class FooController < ApplicationController
  def show
    render layout: 'wide'
  end
end