Wie kann ich ein horizontales Bootstrap-Gitter auf einem mobilen Gerät arbeiten lassen?

Question

Hier ist mein html:

<div class="panel panel-default col-sm-9 col-sm-offset-1"> 
{% for t in usr %}<div class="col-2 col-sm-6-offset-1 col-md-4 col-lg-2 panel panel-default"><br> 

    <span><span> <img src="{{ t.picture.url }}" class="img-responsive" alt="My image" style="display: inline-block; 
      left: 25%; 
      position: relative; 
      width: 45px; 
      height: 45px; 
      border-radius: 50%; 
      background-repeat: no-repeat; 
      background-position: center center; 
      background-size: cover;"/> </span></span><br> 
    <h6 style="text-align: center"><a style="color: inherit;" href="/accounts/profile/{{ t.id }}">{{ t.user.get_full_name }}</a></h6> 
{% if user != t.user %}<a href="{% follow_url t.user %}?next={{ request.path }}">{% endif %} 
    <p style=" left: 10%; 
      position: relative;">{% if user %}{% if user|is_following:t.user and user != t.user %}<span style="background-color: grey" class="btn btn-primary" aria-hidden="true">Unfollow | {{ t.followers }}</span> {% elif user != t.user %}<span class="btn btn-primary" aria-hidden="true">Follow | {{ t.followers }}</span>{% elif user == t.user %}<span style="background-color: grey" class="btn btn-primary" aria-hidden="true">Followers | {{ t.followers }}</span>{% endif %}{% else %} 
     <span style="background-color: grey" class="btn btn-primary" aria-hidden="true">Followers | {{ t.followers }}</span> 
    {% endif %}</p></a> </div> 
{% endfor %}</div> 

Diese zeigt:

Wie Sie sehen können, funktioniert es auf dem Desktop einfach gut. Allerdings, wenn ich genau den gleichen Code auf meinem Handy laufen, ist das, was ich sehe. Alles andere ist in Ordnung, aber dieses Gitter ist einfach verrückt:

Was mache ich hier falsch? Wie gesagt, der Rest des HTML funktioniert auf meinem Handy gut (es ist keine separate mobile Website oder irgendetwas). Dieses Bootstrap-Grid ist die einzige Sache, die Probleme verursacht.

Answer 1

entfernen left Eigenschaft von allen Ihren <span>, <p> und <img> Tags und bearbeiten Sie Ihre CSS wie folgt diesem Beispiel:

span{ 
    display:block; 
} 
img{ 
    display:block; 
    margin:0 auto; 
} 
p{ 
    width:100%; 
    margin:0 auto; 
} 
p.btn-primary{ 
    display:block; 
    margin:0 auto; 
}