css – 为什么我的引导程序clearfix在我的Rails集合中破坏了？

2023年6月1日 232次阅读

我是一名正在研究最终项目的学生.下面你将看到我的应用程序的两个屏幕截图.第一个是普通的桌面视图,其中所有内容都正确呈现.当您开始调整视口较小时,项目的位置会变得不均匀,您可以在第二个屏幕截图中看到.

我是否错误地使用了clearfix用于Bootstrap？我尝试将clearfix放在每个车辆的下方,但是通过检查Bootstrap文档确认clearflix类必须包围所述项目.以下是我的代码：

汽车/ index.html.erb

<div class="row">


<!-- Side Column -->
  <div class="col-sm-3">
    <h3 class="item-category">Make: </h3>
    <ul class="side-menu">
      <%= form_tag filter_vehicles_path do |f| %>
        <% Vehicle.makes.each do |make| %>
            <li>
              <%= display_chosen_check_box_tag(make, params[:makes], "makes[]") -%>
              <%= make -%>
            </li>
        <% end %>

  <h3 class="item-category">Year: </h3>
        <% Vehicle.year_ranges.each do |range| %>
            <li>
              <%= display_chosen_check_box_tag(range, params[:years], "years[]") -%>
              <%= range -%>
            </li>
        <% end %>

        <li><%= submit_tag "Filter" %></li>
      <% end %>
    </ul>
  </div>

  <!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>
</div>

有问题的循环

<!-- Body Column -->
  <div class="col-sm-9">
      <div class="row">
        <div class="clearfix">
          <% @vehicles.each do |vehicle| %>
            <div class="col-sm-6 bottom">
              <h3 class="item-title"><%= link_to "#{vehicle.make} #{vehicle.model}", vehicle %></h3>
                <%= image_tag(vehicle.primary_image.image_url, class: "img-responsive") if vehicle.primary_image %>
                <p class="index-info"><%= vehicle.user.name %>'s <%= vehicle.year %> <%= vehicle.make %> <%= vehicle.model %></p>
                <%= link_to "View Details", vehicle, class: "item-more" %>
            </div>
          <% end %>
        </div>
      </div>
  </div>

问候.

《css – 为什么我的引导程序clearfix在我的Rails集合中破坏了？》

《css – 为什么我的引导程序clearfix在我的Rails集合中破坏了？》

最佳答案 无需添加太多的javascript和clearfix等等.我们只需要在css中进行调整.

您只需要为项目添加最小高度.一切都会得到解决.我为你创造了一个小提琴.

小提琴：

 Demo1是你的场景,demo2是固定的场景.

尝试调整视口大小以查看对demo1和demo 2的影响.

https://jsfiddle.net/Anuj_Kumar/sc17mzkp/1/

如果你的问题仍未解决,请告诉我,我也会解决.

谢谢

点赞