laravel bootstrap - как использовать медиа-запрос для выравнивания двух элементов в строке?

Question

У меня есть страница запроса, которая отображает список предметов для продажи. Это выглядит ниже:

Это выглядит хорошо, но когда я перешел на меньший видовой экран или мобильную раскладку, предметы складываются близко друг к другу, и это не соответствует друг другу.

Мой код:

@section('content')


<style>
    .checked {
  color: orange;
}
@media only screen and (max-width: 500px) {

  .col-3{
    // some adjustment code to display 2 items per row on mobile
  }


</style>



<div>
    {{ Breadcrumbs::render('shop.category.subcategory', $category, $subcategory) }}


  <div class="container">
            <div class="row">        
              <div class="col-3">
                <div class="dropdown">
                  <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
                    <img src="{{asset('images/bedsheet.jpg')}}" style=" border-radius: 50%;  height: 150px; ">    
                  </button><hr>
                  <span class="text-capitalize"><strong>Bed Sheet</strong></span>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
                  </ul>
                </div>  
              </div>  
              <div class="col-3">
                <div class="dropdown">
                  <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
                    <img src="{{asset('images/curtain.jpg')}}" style=" border-radius: 50%;  height: 150px;">    
                  </button><hr>
                  <span class="text-capitalize"> <strong>Curtain</strong> </span>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
                  </ul>
                </div> 
              </div>
              <div class="col-3">
                <div class="dropdown">
                  <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
                    <img src="{{asset('images/pink-bed-sheet.jpg')}}" style=" border-radius: 50%;  height: 150px;">    
                  </button><hr>
                  <span class="text-capitalize"> <strong>Curtain</strong> </span>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
                  </ul>
                </div> 
              </div>


              <div class="col-3">
                <div class="dropdown">
                  <button class="btn btn-default round-background " type="button" id="menu1" data-toggle="dropdown">
                    <img src="{{asset('images/curtain.jpg')}}" style=" border-radius: 50%;  height: 150px;">    
                  </button><hr>
                  <span class="text-capitalize"> <strong>Curtain</strong> </span>
                  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
                  </ul>
                </div> 
              </div>
            </div>
          </div>


    <div class="container">
      <div class="row">
            <!-- Options / Recommendation -->
            <div class="col-md-3 col-sm-12 hidden-sm" style="border: 1px solid #e5e5e5; padding: 10px; right:33%; bottom: 220px; ">
                <!-- Related Categories -->
                <ul class="list-group">
                    <li class="list-group-item">

                        <ul class="list-group">

                            @foreach ($allCategories as $relatedCategory)
                            <li class="list-group-item">
                                <a class="text-capitalize" style="font-weight: 520;" href="/shop/category/{{ $relatedCategory->slug }}">{{ $relatedCategory->name }}</a>

                                @if($relatedCategory->id == $category->id)
                                 <ul class="list-group">
                                    @foreach($category->subcategories as $childCategory)
                                    <li class="list-group-item">
                                         <a class="text-capitalize" style="font-weight: 490;" href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}">{{ $childCategory->name }}</a> 
                                        @if($childCategory->id == $subcategory->id)
                                        <ul class="list-group">
                                            @foreach($subcategory->types as $childType)
                                            <li class="list-group-item">
                                                <a class="text-capitalize" style="font-weight: 400;" href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}/{{ $childType->slug }}">{{ $childType->name }}</a>
                                            </li>
                                            @endforeach 
                                        </ul>
                                        @endif
                                    </li>
                                    @endforeach
                                </ul> <br>

                             @endif 
                            </li>
                            @endforeach
                        </ul> <br>
                        <ul> 
                            <strong>PRICE</strong>
                               <li>Under RM25 </li> 
                               <li>RM 25 to RM 50 </li>
                               <li>RM50 to RM100 </li>
                               <li>RM100 to RM200 </li>
                               <li>RM200 & Above </li>

                               <input type="number" placeholder="Min" id="quantity" name="quantity" min="1" max="300">
                               <input type="number" placeholder="Max" id="quantity" name="quantity" min="1" max="300">
                               </ul> <br>

                               <ul>
                               <strong>COLOR</strong>
                               <li><input type="checkbox" id="white" name="white" value="white">
                                   <label for="white">WHITE</label>
                               </li><br>
                               <li><input type="checkbox" id="beige" name="beige" value="beige">
                                   <label for="beige">BEIGE</label>
                               </li><br>
                               <li><input type="checkbox" id="red" name="red" value="red">
                                   <label for="red">RED</label>
                               </li><br>
                               <li><input type="checkbox" id="maroon" name="maroon" value="maroon">
                                   <label for="beige">MAROON</label>
                               </li><br>
                               <li><input type="checkbox" id="grey" name="grey" value="grey">
                                   <label for="grey">GREY</label>
                               </li><br>
                               <li><input type="checkbox" id="black" name="black" value="black">
                                   <label for="black">BLACK</label>
                               </li><br>
                               </ul>

                               <ul>
                                  <strong>RATINGS</strong> 
                                  <li>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>

                               </li>
                               <li>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star"></span>
                                          and up
                               </li>
                               <li>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star"></span>
                                          and up
                               </li>
                               <li>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star"></span>
                                          and up
                               </li>
                               <li>
                                   <span class="fa fa-star checked"></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star "></span>
                                   <span class="fa fa-star"></span>
                                          and up
                               </li>
                               </ul>
                    </li>
                </ul>


            </div>



        </div>


    </div>    

Я подумал, что мне нужно применить CSS носитель к col-3, но я не знаю точный способ настройки, чтобы он отображал 2 элемента в строке на мобильном макете. Есть ли способ сделать это?

</div>

  @endsection

Answer 1

Этот пример скорее всего подойдет вам. Я использовал исходную разметку, удалил визуальный шум и добавил стили Bootstrap из CDN.

Изменения:

• col-md-3 col-sm-4 col-6 классы для ваших столбцов с изображениями;
• удалена жестко заданная высота внутри встроенных стилей для ваших изображений;
• добавляет некоторые новые стили ниже, включая media-query.

div.dropdown button.btn-default.round-background img {
  background-color: orange;
  height: 90%;
}

div.dropdown button.btn-default.round-background {
  width: 100%;
  height: 150px;
}

@media only screen and (max-width: 380px) {
  div.dropdown button.btn-default.round-background img {
    width: 100%;
    height: auto;
  }
}

Answer 2

Использование .col-6 и .col-sm-3 даст 2 элемента в строке на сверхмалых устройствах (<576px) и 4 элемента в строке на любом другом устройстве. Если вы хотите, например, 3 элемента в строке на небольших устройствах (576px-768px), вы можете использовать <code>.col-6, .col-sm-4 и .col-md-3.

Посмотрите на Bootstrap 4 для получения дополнительной информации об этом. Вы можете найти страницу документации Grid Layout по адресу: https://getbootstrap.com/docs/4.0/layout/grid/#all -breakpoints , а список медиа-запросов Bootstrap использует по адресу: https://getbootstrap.com/docs/4.0/layout/overview/