Rails 5.2部分列的背景图像在页面上呈现的方式不同

问题描述 投票：0回答：1

我在页面上有三个不同的位置，用于渲染同一部分。部分脚本包含引导程序col-sm-4 / col-sm-8情况，该情况应使图像占据页面的三分之一，而文本占据另一个页面的2/3。但是，在每种情况下，局部渲染的呈现方式都不同：

enter image description here

这里是页面（blogs#index）：

<header class="py-5 bg-image-full bg-image-stripe" style="background-image: url(<%= asset_path "drops-of-water-mask.jpg" %>);">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-lg-12">
        <h1 class="display-4 mt-5 mb-2">The Blog</h1>
        <p class="lead mb-5">Your Source for Qualified Knowledge (or Other Tagline)</p>
      </div>
    </div>
  </div>
</header>


<% if current_spree_user && current_spree_user.admin? %>
  <section class="admin container">
    <div class="row">
      <div class="col text-left pt-3">
        <h2>Draft Posts</h2>
        <% @blogs.each do |blog| %>
          <% if !blog.published %>
            <p class="my-1 py-0"><%= link_to blog.title, edit_blog_path(blog) %></p>
          <% end %>
        <% end %>
      </div> <!-- drafts col -->
      <div class="col text-right pt-3">
        <%= link_to "Create New Blog", new_blog_path, class: "btn btn-primary" %>
        <%= link_to "Blog Management", home_blogs_path, class: "btn btn-primary" %>
      </div> <!-- create new col -->
    </div> <!-- row -->
  </section>

  <hr>
<% end %>


<main class="container">

  <div class="row">

    <div class="col-12" id="big-feature">
      <% @big_feature.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="most-popular">
      <h2>Most Popular</h2>
      <% @most_popular.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each blog do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="featured">
      <h2>Featured</h2>
      <% @featured.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each blog do -->
    </div> <!-- col -->

  </div> <!-- row -->

</main> <!-- page container -->

这里是blogs/_blog-card部分：

<%= link_to blog_path(blog) do %>
  <div class="blog-title-box my-3">
    <div class="row">

      <div class="image background-image col-md-4"
        style="background-image: url('<%= blog.featured_image_url %>')">
      </div> <!-- image col -->

      <div class="text col-sm-8 px-4 py-3">
        <h3><%= blog.title %></h3>
        <% if blog.big_feature %><p><%= blog.teaser %></p><% end %>
        <p class="tags"><% blog.tag_list.each do |tag| %>
          <%= link_to tag, tagged_path(tag: tag) %>
        <% end %></p>
        <p class="author"> By <%= Spree::User.find(blog.spree_user_id).email %> on <%= blog.published_at.in_time_zone("America/Los_Angeles").strftime("%B %d, %Y") %></p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
<% end %> <!-- link to blog -->

这里有任何相关的CSS：

.blog-title-box {
  box-shadow: 0 10px 20px rgba(183, 173, 153, 0.19), 0 6px 6px rgba(183, 173, 153, 0.23);
}

.blog-title-box:hover {
  box-shadow: 0 14px 28px rgba(183, 173, 153, 0.30), 0 10px 10px rgba(183, 173, 153, 0.22);
}

.blog-title-box .image {
  height: 300px;
}

#big-feature a:hover,
#most-popular a:hover,
#featured a:hover {
  text-decoration: none !important;
}

.blog-title-box .text p {
  color: black;
}

.blog-title-box .text p.author {
  color: $color-grey;
  font-style: oblique;
}

.background-image {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  max-width: 100%;
}

谁能看到为什么只有“最受欢迎”下的博客才能正确呈现？

其他信息

[根据Chrome检查器，这是页面以HTML呈现的方式：

<main class="container">

  <div class="row">

    <div class="col-12" id="big-feature">
        <a href="/blogs/3">
  </a><div class="blog-title-box my-3"><a href="/blogs/3">
    </a><div class="row"><a href="/blogs/3">

      <div class="image background-image col-md-4" style="background-image: url('https://media.istockphoto.com/photos/water-with-splash-and-bubbles-picture-id952077910')">
      </div> <!-- image col -->

      </a><div class="text col-sm-8 px-4 py-3"><a href="/blogs/3">
        <h3>Test for Big Feature</h3>
        <p>Teaser Goes Here.  Yes, all the things.</p>
        </a><p class="tags"><a href="/blogs/3">
          </a><a href="/tagged?tag=Big+Post">Big Post</a>

          <a href="/tagged?tag=Testing">Testing</a>
        </p>
        <p class="author"> By [email protected] on September 26, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
 <!-- link to blog -->

       <!-- each do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="most-popular">
      <h2>Most Popular</h2>
        <a href="/blogs/2">
  <div class="blog-title-box my-3">
    <div class="row">

      <div class="image background-image col-md-4" style="background-image: url('https://i.guim.co.uk/img/media/9ebfe6eb392f208e944a21d1903b698965d35527/0_0_7360_4417/master/7360.jpg?width=700&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=2b05fd52feeac284411af1bf1215d1d6')">
      </div> <!-- image col -->

      <div class="text col-sm-8 px-4 py-3">
        <h3>Test Blog</h3>

        <p class="tags"></p>
        <p class="author"> By [email protected] on September 24, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
</a> <!-- link to blog -->

       <!-- each blog do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="featured">
      <h2>Featured</h2>
        <a href="/blogs/1">
  </a><div class="blog-title-box my-3"><a href="/blogs/1">
    </a><div class="row"><a href="/blogs/1">

      <div class="image background-image col-md-4" style="background-image: url('https://i.guim.co.uk/img/media/9ebfe6eb392f208e944a21d1903b698965d35527/0_0_7360_4417/master/7360.jpg?width=700&amp;quality=45&amp;auto=format&amp;fit=max&amp;dpr=2&amp;s=2b05fd52feeac284411af1bf1215d1d6')">
      </div> <!-- image col -->

      </a><div class="text col-sm-8 px-4 py-3"><a href="/blogs/1">
        <h3>Yet Another Test Blog</h3>

        </a><p class="tags"><a href="/blogs/1">
          </a><a href="/tagged?tag=Fake+Content+Testing">Fake Content Testing</a>
        </p>
        <p class="author"> By [email protected] on September 25, 2019</p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
 <!-- link to blog -->

       <!-- each blog do -->
    </div> <!-- col -->

  </div> <!-- row -->

</main>

EVEN MORE INFO

您可以看到issue live here。

html css ruby-on-rails-5
1个回答
0
投票

您的RoR代码似乎正确。最终，您应该得到博客卡，并用only one锚点（<a>标签）包围，如下例所示：

<div class="col-sm-6 pt-3" id="featured">
  <h2>Featured</h2>
  <!-- surrounding anchor ---------------------------------------------->
  <a href="/blogs/3"> 
    <div class="blog-title-box my-3">
      <div class="row">
        <div class="image background-image col-md-4"
           style="background-image: url('<the-url>')">
        </div>
        <div class="text col-sm-8 px-4 py-3">
          <h3>Test for Featured</h3>
          <p class="tags">
            <a href="/tagged?tag=Testing">Testing</a>
            <a href="/tagged?tag=Fake+Content">Fake Content</a>
          </p>
          <p class="author">
            By [email protected] on October 01, 2019
          </p>
        </div> 
      </div> 
    </div>
  </a>
  <!-- surrounding anchor (end) ----------------------------------------->
</div>

该示例正确地获得了[[正确]您的设计（图像的1/3）。

但是您提供给HTML结果的链接（实时发布）显示重复的锚点，其中有些是空的：

<div class="blog-title-box my-3"><a href="/blogs/3"></a> 

其他不是。这个特别是
打破设计
：<div class="row"> <a href="/blogs/3"> <!-- unexpected anchor breaking the design --> <div class="image background-image col-md-4" style="background-image: url('<the-url>')"> <!-- [...] --> </div> 
由于我看不到实际执行的代码，因此我无法走得更远。我的猜测是，您必须在RoR代码中看到正在插入那些烦人的锚点的内容。您确定真正执行的代码是您在问题中粘贴的代码吗？
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.