Bootstrap дисплей не работает в производстве на телефоне - PullRequest
Новая
       22

Bootstrap дисплей не работает в производстве на телефоне

0 голосов
/ 06 февраля 2020

Мое приложение работает нормально, если я получаю к нему доступ через компьютер. если я изменю размер окна на моем компьютере, столбец bootstrap будет отзывчивым и будет работать правильно. Однако, когда я захожу на сайт на моем телефоне, когда-то развернутом на heroku, я почему-то вижу макет рабочего стола. под этим я подразумеваю, что вместо представления col-sm-12 они отображаются в col-md-4

, вот мой

, вот вид с телефона: phoneview и вот код для этого: 

<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>

1 Ответ

0 голосов
/ 21 апреля 2020

Я не уверен, как мне не хватало этого в моем приложении. html .erb, но проблема возникла из-за пропущенной строки HTML: 

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

, которая обнаруживает используемые устройства чтобы быть отзывчивым.

...