Question

我尝试使用Twitter Bootstrap和<?php foreach($tester as $data): ?> <div class="col-sm-2"> <img src="" width="150" height="150"/> <?php echo $data['Description'];?> <?php echo $data['Unit_Price'];?> In Stock:<?php echo $data['Qty'];?> Arriving Soon:<?php echo $data['In_Transit'];?> Show All Products In:<?php echo $data['P_Class_Name'];?> </div> <?php endforeach;?>来实现简单的分页，但卡住了。

一切似乎工作得很好唯一的问题是我的div四处漂浮，在页面中留下一些空白空间，如下图所示：

以下是我的代码：

.factory('YelpApi', ['$http',
      function ($http) {
        var randomString = function (length, chars) {
          var result = '';
          for (var i = length; i > 0; --i) {
            result += chars[Math.round(Math.random() * (chars.length - 1))];
          }
          return result;
        };

        var retrieveYelp = function (name, callback) {
          var method =  'GET';
          var url =     'http://api.yelp.com/v2/search';
          var params = {
            callback:                 'angular.callbacks._0',
            ll:                       /* hidden */,
            radius_filter:            '3219',
            oauth_consumer_key:       /* hidden */, // consumer key
            oauth_token:              /* hidden */, //Token
            oauth_signature_method:   'HMAC-SHA1',
            oauth_timestamp:          new Date().getTime(),
            oauth_nonce:              randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
            term:                     name || 'food', 
            actionlinks:              true
          }; // end params
          var consumerSecret =        /* hidden */; //Consumer Secret
          var tokenSecret =           /* hidden */; //Token Secret
          var signature = 
            oauthSignature.generate(
              method, 
              url, 
              params, 
              consumerSecret, 
              tokenSecret, 
              { encodeSignature: false }
            ); 
            // end signature
          params['oauth_signature'] = signature;
          console.log('inside yelpapi factory');
          console.log('Term searched for: ' + params.term);
          $http.jsonp(url, { params : params })
            .then(callback, function(err) {
              console.log('An error occured: ', err);
            });
            console.log("inside end of yelpapi factory");
        }; // end retrieveYelp

        return {
          retrieveYelp: retrieveYelp      
        };

      } // end function

    ]) // end factory

Answer 1

在每个6个元素之后放置class="clearfix" div以创建非浮点敏感换行符

<?php $i=0; foreach($tester as $data): $i++; ?>
<div class="col-sm-2">
  <img src="" width="150" height="150"/>
  <br>
  <span><?php echo $data['Description'];?></span><br>
  <span><?php echo $data['Unit_Price'];?></span><br>
  <span>In Stock:<?php echo $data['Qty'];?></span><br>
  <span>Arriving Soon:<?php echo $data['In_Transit'];?></span><br>
  <span>Show All Products In:<?php echo $data['P_Class_Name'];?></span>
  </div>
  <?php if ($i % 6 == 0) { ?><div class="clearfix"><?php } ?>
<?php endforeach;?>

但是，如果您需要为不同的视点大小每行显示不同数量的元素，则不应使用此解决方案。

在使用div和bootstrap的php中的分页

1 个答案: