如何在移动设备上制作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; 
}