Загрузочные сетки делятся рядом друг с другом - PullRequest
Новая
       9

Загрузочные сетки делятся рядом друг с другом

0 голосов
/ 17 сентября 2018

В интернет-магазине я перечисляю продукты в div класса col-md-3. При этом в мобильном представлении элементы div находятся друг под другом.

Что я хочу, чтобы при просмотре на мобильном устройстве я хотел 2 деления рядом друг с другом.

Как я могу это сделать? Использовать не только класс col-md-3, но и добавить класс col-xs-6 в div? 

<div class="col-md-3 col-xs-6">
  <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span>
  <a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_img_to_link">
    <img src="https://domain.hu/images/item/th-8888-28950.jpg" alt="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="img-responsive">
  </a>
  <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2>
  <span class="main_item_cikkszam">Cikkszám: 997872</span>
  <span class="main_item_kiszereles">Kiszerelés: Darab</span>
  <span class="main_item_kiszereles"><b>Készleten</b></span>
  <input type="hidden" value="1" id="MinimumOrder186"><span class="main_item_price_2">101.290 Ft,-</span>
  <span class="main_item_price_3">Akciós ár: 97.290 Ft,-</span><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" class="kiemeltek_to_link" title="Termék adatlap">Termék adatlap <i class="fa fa-info-circle" aria-hidden="true"></i></a>
</div>

Ответы [ 3 ]

0 голосов
/ 17 сентября 2018

Просто наличие col класса сетки будет складывать div по горизонтали во всех окнах просмотра. Bootstrap автоматически позаботится о равномерном разделении ширины. Посмотрите документацию по начальной загрузке в системе координат для получения дополнительной информации. 

<div class="container">
  <div class="row">
    <div class="col"> <!--Col 1-->
      <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap"
                                     title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte
        Z370 AORUS GAMING 7-OP alaplap</a></h2>
      <span class="main_item_cikkszam">Cikkszám: 997872</span>
      <span class="main_item_kiszereles">Kiszerelés: Darab</span>
      <span class="main_item_kiszereles"><b>Készleten</b></span>
    </div>

    <div class="col"> <!--Col 2-->
      <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap"
                                     title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte
        Z370 AORUS GAMING 7-OP alaplap</a></h2>
      <span class="main_item_cikkszam">Cikkszám: 997872</span>
      <span class="main_item_kiszereles">Kiszerelés: Darab</span>
      <span class="main_item_kiszereles"><b>Készleten</b></span>
    </div>
  </div>
</div>

Я также создал ручку с приведенным выше кодом, поиграйте и проверьте вывод.

0 голосов
/ 17 сентября 2018

Правда, большинство классов классов начальной загрузки используются смешанным образом.Так что просто добавьте col-xs-6 для первого div, col-xs-6 для второго div (помните, что они должны иметь обертку div class = "row" снаружи, чтобы класс col мог понимать и делить), какрезультат, в мобильном режиме они будут стоять рядом друг с другом.Надеюсь, что эта справка (Этот код работает, только если вы используете Bootstrap v3.3.7, в Bootstrap 4 изменены некоторые col-классы): 

 <div class="container">
    <div class="row"> <!-- 1 ROW = 12 COLUMNS OF GRID -->
    <!-- YOUR PRODUCTS LIST -->
       <!-- FIRST DIV-->
       <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6">
        ... // THE CONTENT HERE
       </div>
       <!--SECOND DIV-->
       <div class="col-md-3 col-xs-6 col-lg-3 col-sm-6">
       </div>
    <!--END OF YOUR PRODUCTS LIST-->
    </div>
</div>

Обратите внимание, что строка, содержащая div, равна 12 столбцампоэтому, когда вы используете смешивание следующим образом: 

 col-md-3 = 3/12 = 1/4 ( in larger desktop mode )
 col-xs-6 = 6/12 = 1/2 in mobile mode
 col-lg-3 = 3/12 = 1/4 ( in desktop mode )
 col-sm-6 = 6/12 = 1/2 in tablet mode
0 голосов
/ 17 сентября 2018

В приведенном ниже примере будут перечислены 2 деления рядом друг с другом от очень маленького размера и выше: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span>
      <a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_img_to_link">
        <img src="https://domain.hu/images/item/th-8888-28950.jpg" alt="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="img-responsive">
      </a>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2>
      <span class="main_item_cikkszam">Cikkszám: 997872</span>
      <span class="main_item_kiszereles">Kiszerelés: Darab</span>
      <span class="main_item_kiszereles"><b>Készleten</b></span>
      <input type="hidden" value="1" id="MinimumOrder186"><span class="main_item_price_2">101.290 Ft,-</span>
      <span class="main_item_price_3">Akciós ár: 97.290 Ft,-</span><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" class="kiemeltek_to_link" title="Termék adatlap">Termék adatlap <i class="fa fa-info-circle" aria-hidden="true"></i></a>
    </div>
    
    <div class="col-6">
      <span class="ribbon-ketsoros">Ingyenes<br>szállítás</span>
      <a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_img_to_link">
        <img src="https://domain.hu/images/item/th-8888-28950.jpg" alt="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="img-responsive">
      </a>
      <h2 class="main_item_title"><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" title="Gigabyte Z370 AORUS GAMING 7-OP alaplap" class="main_item_title_to_link">Gigabyte Z370 AORUS GAMING 7-OP alaplap</a></h2>
      <span class="main_item_cikkszam">Cikkszám: 997872</span>
      <span class="main_item_kiszereles">Kiszerelés: Darab</span>
      <span class="main_item_kiszereles"><b>Készleten</b></span>
      <input type="hidden" value="1" id="MinimumOrder186"><span class="main_item_price_2">101.290 Ft,-</span>
      <span class="main_item_price_3">Akciós ár: 97.290 Ft,-</span><a href="https://domain.hu/termek/186/gigabyte-z370-aorus-gaming-7-op-alaplap" class="kiemeltek_to_link" title="Termék adatlap">Termék adatlap <i class="fa fa-info-circle" aria-hidden="true"></i></a>
    </div>

  </div>
</div>
...