如何在移动设备上制作Bootstrap水平网格工作?
问题描述:
这里是我的html:如何在移动设备上制作Bootstrap水平网格工作?
<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在我的手机上工作正常(它不是一个单独的移动网站或任何东西)。这个引导网格是唯一引起问题的东西。
答
卸下所有<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;
}
'COL-2 COL-SM-6-偏移1'看起来奇怪的引导 – Banzay