Question

我正在尝试使用bootstrap 4 alpha和PHP创建一些应该是网上商店的文章。

我认为我需要模数（%），但我无法实现我想要的东西，我已阅读this并尝试使用它，但我无法让它工作，因为我真的不明白它的作用。

我需要的是1行，4列，以及这种重复。我希望你明白我要去哪里。

这是HTML示例，可以在下面的PHP中看到更多行和div：

<div class="row">
  <div class="sm-col-3">
    <div class="card-deck-wrapper">
      <div class="card-deck">
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Omschrijving van het product. </span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Ik zal hier ook maar wat in knallen zodat niet alle kaarten even groot zijn.</span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Deze kaart zal ook net even iets groter zijn om het uit te testen want ik snap er geen reet van.</span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Omschrijving van het product.</span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="sm-col-3">
    <div class="card-deck-wrapper">
      <div class="card-deck">
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Omschrijving van het product.</span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
        <div class="card card-outline-secondary">
          <img class="card-img-top m-x-auto d-block placeholder" src="empty.png" alt="Product">
          <div class="card-block">
            <h4 class="card-title">Product</h4>
            <p class="card-text">
              <span>Omschrijving van het product.</span><br>
              <span>&euro; 1,00</span><br>
              <span>Voorraad: 1</span>
            </p>
            <a href="#" class="btn btn-primary">Koop</a>
          </div>
        </div>
      </div>
    </div>
  </div>

PHP我现在拥有的东西：

$categorie = mysqli_real_escape_string($mysqli, $_GET['categorie']);
$sql = "SELECT * FROM producten WHERE categorie = '$categorie' AND voorraad > 0";
$result = mysqli_query($mysqli, $sql) or die(mysqli_error($mysqli));
if (mysqli_num_rows($result) == 0) {
    echo "<div class=\"card card-inverse card-warning text-xs-center\">\n";
    echo "  <div class=\"card-block\">\n";
    echo "      <blockquote class=\"card-blockquote\">\n";
    echo "          <span>Deze categorie bestaat niet!</span>\n";
    echo "      </blockquote>\n";
    echo "  </div>\n";
    echo "</div>\n";
}
else {
    echo "<h3>Categorie: " . ucfirst($_GET['categorie']) . "</h3>\n";

    $i = 0;
    while ($row = mysqli_fetch_array($result)) {
        if ($i % 3 == 0) {
            echo "<div class=\"row\">\n";
            echo "  <div class=\"sm-col-3\">\n";
            echo "      <div class=\"card-deck-wrapper\">\n";
            echo "          <div class=\"card-deck\">\n";
        }
        echo "              <div class=\"card card-outline-secondary\">\n";
        if ($row['plaatje'] == "") {
            echo "                 <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"empty.png\" alt=\"". $row['naam'] . "\">\n";
        }
        else {
            echo "                <img class=\"card-img-top m-x-auto d-block placeholder\" src=\"" . $row['plaatje'] . "\" alt=\"". $row['naam'] . "\">\n";
        }
        echo "                <div class=\"card-block\">\n";
        echo "                    <h4 class=\"card-title\">" . $row['naam'] . "</h4>\n";
        echo "                    <p class=\"card-text\">\n";
        echo "                        <span>" . nl2br($row['omschrijving']) . "</span><br>\n";
        echo "                        <span>&euro; " . str_replace(".", ",", number_format($row['prijs'], 2)) . "</span><br>\n";
        echo "                        <span>Voorraad: " . $row['voorraad'] . "</span><br>\n";
        echo "                    </p>";
        echo "                    <a href=\"winkelwagen.php?actie=voegtoe&id=" . $row['productnr'] . "\" class=\"btn btn-primary\">Koop</a>\n";
        echo "                </div>\n";
        echo "            </div>\n";
        if ($i % 3 == 2) {
            echo "          </div>\n";
            echo "      </div>\n";
            echo "  </div>\n";
            echo "</div>\n";
        }
        if ($i % 3 != 0) {
            echo "          </div>\n";
            echo "      </div>\n";
            echo "  </div>\n";
            echo "</div>\n";
        }
        $i++; 
    }

这可能是一个简单的解决方案，但我看不到它！

感谢您的时间。

Answer 1

从您问题中的链接，这对我有用：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"> <!-- container-fluid -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            <span class="icon-bar"></span> <!-- do not remove these, this will be visible on the mobile devices -->
            </button>
            <a class="navbar-brand" href="<?php bloginfo('url')?>">                
                <img src="<?php echo get_template_directory_uri(); ?>/assets/main_logo.png" alt="beekeeper-design-studio-logo.png" title="Beekeeper Design Studio Logo"/>
            </a>
        </div>
        <div class="navbar-right">
            <?php /* for Bootstrap navbar use this php from -  https://github.com/twittem/wp-bootstrap-navwalker */
                wp_nav_menu( array(
                    // name of the menu which you created in wp admin panel 
                    'menu'              => 'wp-primary-menu',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1', // to collapse the navbar in responsive
                    'menu_class'        => 'nav navbar-nav', // ul menu class
                    'walker'            => new wp_bootstrap_navwalker() //Process nav menu using our custom nav walker
                    ));
            ?>                
        </div>
    </div> <!-- container-fluid -->
</nav>

http://www.devchunks.com/web-development/using-the-php-modulus-operator/

PHP显示行和div重复的文章

1 个答案: