Question

在一个网上商店中，我正在将产品列出到col-md-3类div中。这样一来，在移动设备视图中，div便位于彼此之间。

我想要的是，当我在移动设备上查看时，我希望彼此相邻2个div。

我该怎么做？不仅要使用col-md-3类，还要向div中添加col-xs-6类？

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

Answer 1

下面的示例将从小到大依次列出两个div：

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

Answer 2

仅具有col网格类将在所有视口中水平堆叠div。 Bootstrap将自动照顾相等的宽度。请查看网格系统上的bootstrap documentation，以了解更多信息。

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

我还使用上面的代码创建了pen，播放并检查输出。

Answer 3

是的，大多数引导模板类是混合使用的。因此，只需在第一个div上添加col-xs-6，在第二个div上添加col-xs-6（请记住，它们应该在外部具有div class =“ row”包装，以便col类可以理解和划分），结果，在移动模式下，它们将彼此并排站立。希望获得帮助（仅当您使用Bootstrap v3.3.7时，此代码才有效，在Bootstrap 4中某些col-class发生了更改）：

 <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

引导网格div彼此相邻

3 个答案: