时间戳

首页 > 解决方案 > 引导显示无法在手机上进行生产

html - 引导显示无法在手机上进行生产

问题描述

如果我通过计算机访问它，我的应用程序运行良好。如果我调整计算机上的窗口大小，则引导程序的 col 响应并正常工作。但是，当我在部署到 heroku 后在手机上访问该站点时，出于某种原因，我看到了桌面布局。我的意思是，我没有 col-sm-12 视图，而是将它们放在 col-md-4 中

这是我的

这是电话的视图： 电话查看 这是它的代码：

<div class="jumbotron jumbotron-fluid">
  <div class="jumbocontainer">
    <h2 class="display-4">Bienvenue à UnigeCommunity</h2>
    <p class="lead"> Une manière plus simple d'étudier.</p>
  </div>
</div>



<div class="container">


<div class="row faculty-section my-5">

<h2 class="text-center col-12"> <i class="fas fa-graduation-cap"></i> Facultés <i class="fas fa-graduation-cap"></i></h2>

<%  @categories.each do |category| %>
<div class="col-sm-12 col-md-4 text-center my-4 ">
    <div class="card m-1" style="max-width: 18rem; height: 100%;">

    <% if category.catimage.url.present? %>
    <%= image_tag category.catimage.url, class: "card-img-top" %>
    <% end %>
    <div class="card-body">
      <h5 class="card-title text-center"> <%= link_to category.category , category %> </h5>
      <%= category.posts.count %><a> <i class="far fa-copy"></i> </a>

    </div>
  </div>

    </div>
<% end %>


</div>





<div class="row faculty-section my-5">

<h2 class="text-center col-12">  Publications récentes </h2>

<%  @posts.each do |p| %>
<div class="col-sm-12 col-md-4 text-center my-4 ">
    <div class="card m-1" style="max-width: 18rem; height: 100%;">


    <div class="card-body">
      <h5 class="card-title text-center"> <%= link_to p.title , p %> </h5>
        <span>   <%= link_to "View", p, class: "btn btn-primary"  %> </span>

    </div>
  </div>

    </div>
<% end %>
</div>

<div class="row my-5 faculty-section">
  <div class="col-6  text-center">
    <h2> <i class="fas fa-users"></i> <br>
    Rejoins plus de <%= @user %> Étudiants.</h2>

  </div>
  <div class="col-6 text-center">
  <h2>
    <i class="fas fa-copy"></i> <br>
    Et plus de <%= @post.count %> contributions.
  </h2>

  </div>
</div>

<div class="row m-auto my-5">
  <div class=" text-center premium-section col-6 m-auto">
    <h2 class="premium-text mt-5"> Bientôt l'options premium!</h2>
  </div>
</div>


</div>

标签： htmlruby-on-railsherokubootstrap-4col

解决方案

我不确定我是如何在 application.html.erb 中遗漏这个的，但问题来自于 HTML 的缺失行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它检测使用的设备以做出响应。

推荐阅读