Question

拥有三种语言的网站。这些产品从一个mysql数据库中选择并显示了一个do-while-loop。

＆＃13;

<!-- Shop Page Area Start-->
<div class="shoppage-area">
  <div class="container">
    <div class="about-desc">
      <h2>
        <?php echo $page['subtitle']; ?>
      </h2>
      <?php echo $page['content']; ?>
    </div>
    <div class="row">

      <?php
					do {
					?>
        <!--Product Start-->
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div class="sngle-product">
            <div class="product-thumb">
              <a href="#"><img src="<?php echo $product['img']; ?>" alt=""/></a>
              <h2>
                <a href="#">
                  <?php echo $product['name']; ?>
                </a>
              </h2>
            </div>
            <h3>
              <?php echo $product['desc']; ?>
            </h3>
            <span><?php echo $product['size']; ?></span>&nbsp;<span class="price"><?php echo $product['price']; ?> LE</span>
            <div class="product-overlay">
              <ul>
                <li>
                  <div class="product-quantity">
                    <div class="input-number">
                      <input type="text" value="1" name="quantity">
                    </div>
                  </div>
                </li>
                <li><a class="orderbtn" href="#" data-uid="<?php echo $product['uniqueid']; ?>">ORDER</a></li>
              </ul>
            </div>

          </div>
        </div>
        <!-- Product End -->
        <?php
					} while ($product = $res->fetch_assoc()) ?>

    </div>
    <!-- end Row -->
  </div>
</div>

＆＃13;

问题在于，在一种语言中显示正确，而在另一种语言中，我在产品之间获得了很多空间。见图像

enter image description here

我如何解决这个问题

Answer 1

在产品包装flex-row元素中添加其他类row。并尝试应用以下样式。

.flex-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Answer 2

您可以像这样划分栏目

 <div class="shoppage-area">
    <div class="container">
        <div class="about-desc">
        </div>
        <div class="row">
        <?php $i=1;
        do {
        ?>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
            <div class="sngle-product">
                <div class="product-thumb">
                    <a href="#"><img src="<?php echo "test"; ?>" alt=""/></a>
                    <h2><a href="#"><?php echo "test"; ?></a> </h2>   
                </div>
                <h3><?php echo ($i==2)? " testtesttesttesttesttest testtesttesttest test": "test"; ?></h3>
                <span><?php echo "test"; ?></span>&nbsp;<span class="price"><?php echo 12321; ?> LE</span>
                <div class="product-overlay">
                    <ul>
                        <li>
                            <div class="product-quantity">
                                <div class="input-number">
                                    <input type="text" value="1" name="quantity">
                                </div>
                            </div>
                        </li>
                        <li><a class="orderbtn" href="#" data-uid="<?php echo "1231"; ?>">ORDER</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <?php
        echo $i%4;
        if($i%4== 0 && $i > 1) {
            echo '</div><div class="row">';
        }
        $i++;
        } while ($i<=10) ?>
   </div>
</div> 
</div>

Bootstrap，为什么产品会随意显示？

2 个答案: