代码之家 › 专栏 › 技术社区 › Webshop2229

相邻的引导网格div

bootstrap-4 twitter-bootstrap-3 twitter-bootstrap css html

-1

Webshop2229 · 技术社区 · 7 年前

在一家网店里,我把产品列在col-md-3分类中。有了这个,在移动视图中,两个div在彼此下面。

我想要的是,当我在移动设备上观看时,我希望两个div相邻。

我该怎么做?不仅仅使用col-md-3类,还要向divs添加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>

3 回复 | 直到 7 年前

MichaelvE 7 年前

下面的例子将列出两个相邻的div,分别是extra small和up:

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

SubSul 7 年前

只是吃 col grid类将在所有视口中水平堆叠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 除了上面的代码外,还可以玩一玩并查看输出。

Harley Liang 7 年前

的确,大多数引导模板col-class都是以混合方式使用的。因此,只需为第一个div添加col-xs-6,为第二个div添加col-xs-6(记住,它们应该在外面有一个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