bootstrap 3 ipad issue

Question

В настоящее время я просматриваю мой сайт, тестируя его на настоящий момент. Мобильный/рабочий сайт в порядке, проблема у меня есть с ipad при просмотре страницы поиска на ipad, плитки раздавлены против левого, т.е. 1 ПИК в ряд, в идеале я хотел бы видеть два, если не три подряд, но я не могу заставить его работать, как и ожидалось, HTML разметки для страницы выглядит следующим образом:

<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> 

Вышеуказанное вынесенное делает следующий жгутов вид MVC Razor:

<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> 

UPDATE

Это то, что в настоящее время он выглядит как с использованием выше

Answer 1

Моя начальное предположение, не видя живую демонстрацию, что только один показывается в строке из коллектив- см-6. Так как бутстрап имеет 12-ти столбцовый макет, если есть какие-либо дополнения или поля, применяемые к объектам, то 6 + 6 + заполнение больше 12 и приведет его к следующей строке. Я понимаю, что для каждой новой строки должно быть «div.row». Надеюсь, это поможет.