如何在移動設備上製作Bootstrap水平網格工作？

Question

這裏是我的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> 

這顯示：

正如你所看到的，它只是罰款在桌面上。 但是，當我在手機上運行完全相同的代碼時，這就是我所看到的。一切都很好，但這個網格只是瘋了：

我在做什麼錯在這裏？正如我所說的，其餘的html在我的手機上工作正常（它不是一個單獨的移動網站或任何東西）。這個引導網格是唯一引起問題的東西。

Answer 1

卸下所有<span>，<p>和<img>標籤left財產和編輯你的CSS如下例所示：

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