Bootstrap投资组合行

时间:2015-11-16 09:40:24

标签: php twitter-bootstrap

目前我的投资组合网站存在问题。我想显示2行,包含4个投资组合项目。但是现在如果添加新行,项目会变得越来越大。我会附上问题的照片。

enter image description here

    <div class="row">
        <div class="col-lg-12">
           <h1 class="page-header">Mijn Portfolio</h1>
        </div>

        <?php

            // SHOW POSTS QUERY
            $query = "SELECT * FROM posts";
            $select_all_portfolio_items_query = mysqli_query($connection, $query);

            // Display alle posts in tabel posts in blog entries column
            while($row = mysqli_fetch_assoc($select_all_portfolio_items_query)){

                $item_id = $row['post_id'];
                $item_titel = $row['post_title'];
                $item_auteur = $row['post_author'];
                $item_datum = $row['post_date'];
                $item_image = $row['post_image'];
                $item_content = substr($row['post_content'], 0, 50);
                $item_status = $row['post_status'];

                if($item_status == 'published'){


            ?>
    </div><!-- row -->


    <div class="row">

       <div class="col-md-3 portfolio-item">

          <a rel="prettyPhoto[gallery1]" class="thumbnail" title="This is a caption" href="https://www.youtube.com/watch?v=Rp19QD2XIGM">
              <img class="img-responsive" src="images/<?php echo $item_image; ?>" alt="Video 1">
              <h3 class="text-center"><?php echo $item_titel; ?></h3>
              <small><?php echo $item_datum; ?></small>
              <small>door <?php echo $item_auteur; ?></small>
              <p class=""><?php echo $item_content; ?></p>
            <a class="btn btn-primary" href="post.php?p_id=<?php echo $item_id; ?>">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
          </a>  
          <?php }} ?> 
       </div>

      </div><!-- portfolio row -->

我认为问题存在于while循环中。因为每次它通过这个循环它会形成一个新的行,所以它变得越来越大。

我希望你们能帮我解决这个问题。

ps:我正在使用bootstrap类。

亲切的问候, 凯文。

2 个答案:

答案 0 :(得分:0)

问题是,您在每个项目组合项目中创建行。 我认为(没有办法确定没有小提琴)你应该重新定位?php}}?这将关闭php例程一行(关闭组合项目的/ div后)并在构建3个实例后关闭该行。

答案 1 :(得分:0)

你的循环和行错了。试试这个;

<div class="row">
    <div class="col-lg-12">
       <h1 class="page-header">Mijn Portfolio</h1>
    </div>
</div><!-- row -->


<div class="row">


    <?php

        // SHOW POSTS QUERY
        $query = "SELECT * FROM posts";
        $select_all_portfolio_items_query = mysqli_query($connection, $query);

        // Display alle posts in tabel posts in blog entries column
        while($row = mysqli_fetch_assoc($select_all_portfolio_items_query)){

            $item_id = $row['post_id'];
            $item_titel = $row['post_title'];
            $item_auteur = $row['post_author'];
            $item_datum = $row['post_date'];
            $item_image = $row['post_image'];
            $item_content = substr($row['post_content'], 0, 50);
            $item_status = $row['post_status'];

            if($item_status == 'published'){


        ?>
    <div class="col-md-3 portfolio-item">



      <a rel="prettyPhoto[gallery1]" class="thumbnail" title="This is a caption" href="https://www.youtube.com/watch?v=Rp19QD2XIGM">
          <img class="img-responsive" src="images/<?php echo $item_image; ?>" alt="Video 1">
          <h3 class="text-center"><?php echo $item_titel; ?></h3>
          <small><?php echo $item_datum; ?></small>
          <small>door <?php echo $item_auteur; ?></small>
          <p class=""><?php echo $item_content; ?></p>
        <a class="btn btn-primary" href="post.php?p_id=<?php echo $item_id; ?>">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
      </a>  

     </div>   

      <?php }

            } ?> 
   </div>