如何在移动设备上创建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

从您的所有left，<span>和<p>标记中删除<img>属性，并按照以下示例编辑您的css：

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