Html bootstrap 3 ipad问题
我目前正在通过我的网站进行测试，目前手机/台式机还不错，我的问题是在ipad上查看搜索页面时，瓷砖被压扁在左边，即每行1张图片，理想情况下我希望看到两张，如果不是三张，但我无法让它按预期工作，页面的HTML标记如下所示：Html bootstrap 3 ipad问题,html,razor,twitter-bootstrap-3,asp.net-mvc-5,Html,Razor,Twitter Bootstrap 3,Asp.net Mvc 5,我目前正在通过我的网站进行测试，目前手机/台式机还不错，我的问题是在ipad上查看搜索页面时，瓷砖被压扁在左边，即每行1张图片，理想情况下我希望看到两张，如果不是三张，但我无法让它按预期工作，页面的HTML标记如下所示： <section class="catalog-grid"> <div class="container"> <div class="row"> <div class="col-sm-12">
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-5">
<div class="shop-filters" style="display: block;">
<form action="/search/members" method="post">
<div class="widget">
<h5 class="widget-title font-alt">Filter</h5>
</div>
Filter stuff goes here
</form>
</div>
</div>
@*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*@
<div class="col-lg-9 col-md-9 col-sm-9">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/1/new-to-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/mhcoeigrttdgemwjuig7" alt="Atkinson1988" />
</a>
<div class="footer">
<a href='/member/1/new-to-melbourne'>Atkinson1988</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, St kilda road<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/4/female-2-asian-male-tp'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/t4leodsoxa0h5zaqomt7" alt="Female2" />
</a>
<div class="footer">
<a href='/member/4/female-2-asian-male-tp'>Female2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Docklands<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
<span class="best-seller">Online</span>
</div>
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/j6xnf3lu2gffviv1qkw3" alt="Tester123" />
</a>
<div class="footer">
<a href='/member/5/hello%2c-is-it-me-your-looking-for'>Tester123</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/2/i-am-a-female-from-melbourne'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/hyssjfqilmyntk9gvi4r" alt="Female1" />
</a>
<div class="footer">
<a href='/member/2/i-am-a-female-from-melbourne'>Female1</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Melbourne<br /></span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
</div>
<a href='/member/3/male-2-lookin-for-male-training-partner'>
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="Male2" />
</a>
<div class="footer">
<a href='/member/3/male-2-lookin-for-male-training-partner'>Male2</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> Victoria, Southbank<br /></span>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row text-center">
<div class="pagination-container"><ul class="pagination"><li class="active"><a>1</a></li></ul></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
滤器
过滤材料在这里
@*这是渲染结果/配置文件的位置*@
-维多利亚州圣基尔达路
-维多利亚，码头区
在线 的
-维多利亚，墨尔本
-维多利亚，墨尔本
-维多利亚，南岸
-
-@t.Location
}
@Html.PagedListPager（（IPagedList）ViewBag.listoUsers，page=>Url.Action（“搜索”，“成员”，新建{page}））
}
其他的
{
很抱歉，我们找不到符合您提供的条件的任何人。
}
在没有看到现场演示的情况下，我的初步猜测是，由于col-sm-6，每行只显示一个。因为引导有一个12列的布局，如果有任何填充或边距应用于对象，6+6+填充大于12并将其推到下一行。我的理解是，每一行都应该有一个“div.row”。希望这能有所帮助。感谢您建议使用边距或填充，我们的一位开发人员在瓷砖上打出了一个最大宽度，这导致了问题，删除了这个，并修改了sm尺寸，解决了问题。
<section class="catalog-grid">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="filters-mobile col-lg-3 col-md-3 col-sm-4">
<div class="shop-filters" style="display: block;">
@using (Html.BeginForm("Search", "Members", FormMethod.Post))
{
<div class="widget">
<h5 class="widget-title font-alt">My Filter</h5>
</div>
@Html.AntiForgeryToken()
}
</div>
</div>
@*THIS IS WHERE THE RESULTS / PROFILES ARE RENDERED*@
<div class="col-lg-9 col-md-9 col-sm-8 ">
<div class="row">
@if (ViewBag.ListOfUsers.Count > 0)
{
foreach (var t in ViewBag.ListOfUsers)
{
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="tile">
<div class="badges">
@if (t.LoggedIn)
{
<span class="best-seller">Online</span>
}
</div>
<a href='@Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>
@if (!string.IsNullOrWhiteSpace(t.PhotoId))
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_100,c_fill,h_255,w_255,g_face/@t.PhotoId" alt="@t.Username" />
}
else
{
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/c_fill,h_255,w_255,g_face/no-photo_pwpgkz" alt="@t.Username" />
}
</a>
<div class="footer">
<a href='@Url.Action("Member", "User", new { area = "User", Id = t.UserId, slug = t.Headline})'>@t.Username</a>
<span> - <i class="glyphicon glyphicon-map-marker"></i> @t.Location<br /></span>
</div>
</div>
</div>
}
<div class="clearfix"></div>
<div class="row text-center">
@Html.PagedListPager((IPagedList)ViewBag.ListOfUsers, page => Url.Action("Search", "Members", new { page }))
</div>
}
else
{
<div class="col-sm-8 col-sm-offset-2 text-center">
<p>
Sorry, we couldn't find anyone within the criteria you provided.
</p>
</div>
}
</div>
</div>
</div>
</div>
</div>