在3列中构建可下载内容

时间：2016-07-10 14:23:32

标签： css angularjs twitter-bootstrap

我接受JSON的回复，想把它粘贴在3列中。我使用bootstrap类<ul class="nav nav-tabs topics-div"> <li class="li-div"><a><span>Topics</span> <span class="glyphicon glyphicon-play" aria-hidden="true"></span></a></li> <!-- use `track by $index` here along with `ng-repeat` --> <li ng-repeat="topics in oJdDetails.topics track by $index"> <a style="cursor:pointer" ng-click="fngetQList(topics, $index)"> <p>{{topics}}</p> <uib-rating ng-model="rate[$index]" ng-if="displayStars[$index]" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating> </a> </li> </ul> 和angularjs作为框架..我想连续排列3个元素，但是当内容太大时 - 它会分解并看起来像： enter image description here

请参阅以下plnkr (view in fullscreen)

2 个答案:

答案 0 :(得分：2)

如果您只想在@ 992px或更高版本（col-md-4）的单行内无限放置3列，只需在该媒体查询中清除列的浮动。

@media (min-width: 992px) {
    .col-md-4:nth-child(3n+1) {
        clear: left;
    }
}

*不要将此直接应用于col-md-4，因为它将全局应用于该类。

清除列浮动示例 

var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {
  $scope.list = [{
    name: 'John1',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John2',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John3',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John4',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John5',
    text: ['asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas']
  }, {
    name: 'John6',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John7',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John8',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John9',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John10',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }]
})
.grid-item-inner {
  background: #333;
  color: white;
  border: 1px solid red;
  padding: 0px 10px 10px;
  margin: 10px 0;
}
@media (min-width: 991px) {
  .grid-item:nth-child(3n+1) {
    clear: left;
  }
}
<html ng-app="App">
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="Ctrl">
  <div class="container">
    <div class="row">
      <div class="col-md-4 grid-item" ng-repeat="item in list">
        <div class="grid-item-inner">
          <h3>{{item.name}}</h3>
          <ul class="list-unstyled">
            <li ng-repeat="thing in item.text track by $index">{{thing}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
</body>
</html>

或者，如果您尝试将每列直接放在彼此之下（砌体布局），则可以采用MasonryJS。请参阅Angular-Masonry。

用于砌体实例的AngularJS指令 

'use strict';

angular.module('ngMasonry', [])
  .controller('masonryController', function() {
    var vm = this;

    vm.config = {};
    vm.container = undefined;
    vm.ready = ready;
    vm.initialize = initialize;
    vm.reLayout = reLayout;

    function ready() {
      return !!vm.config && !!vm.config.masonryContainer;
    }

    function initialize() {
      var defaultOpts = {
          itemSelector: vm.config.masonryItem
        },
        opts = !vm.config.masonryOption ? defaultOpts : angular.extend(defaultOpts, vm.config.masonryOption);

      vm.container = new Masonry(vm.config.masonryContainer, opts);

      if (typeof imagesLoaded !== 'undefined') {
        new imagesLoaded(vm.config.masonryContainer, function() {
          vm.reLayout();
        });
      }
    }

    function reLayout() {
      vm.container.layout();
    }
  })
  .directive('masonry', function() {
    var directive = {
      restrict: 'A',
      controller: 'masonryController',
      compile: compile
    };

    return directive;

    function compile(element, attributes) {
      var flag = false,
        child = angular.element(document.querySelectorAll('[' + attributes.$attr.masonry + '] [data-masonry-item], [' + attributes.$attr.masonry + '] [masonry-item]'));

      angular.forEach(child, function(obj) {
        obj = angular.element(obj);
        if (obj.attr('ng-repeat') !== undefined || obj.attr('data-ng-repeat') !== undefined) {
          flag = true;
          obj.attr('data-masonry-after-render', '');
        }
      });
      return {
        pre: function(scope, element, attributes, controller) {
          controller.config.masonryContainer = '[' + attributes.$attr.masonry + ']';
          controller.config.masonryOptions = JSON.parse(attributes.masonryOptions || '{}');
        },
        post: function(scope, element, attributes, controller) {
          if (!flag) {
            controller.initialize();
          }
        }
      };
    }
  })
  .directive('masonryItem', function() {
    var directive = {
      restrict: 'A',
      require: '^masonry',
      priority: 1,
      compile: compile
    };

    return directive;

    function compile() {
      return {
        pre: function(scope, element, attributes, controller) {
          if (controller.config.masonryItem === undefined) {
            controller.config.masonryItem = '[' + attributes.$attr.masonryItem + ']';
          }
        }
      };
    }
  })
  .directive('masonryAfterRender', function($timeout) {
    'ngInject';
    var directive = {
      restrict: 'A',
      require: '^masonry',
      priority: 0,
      link: link
    };

    return directive;

    function link(scope, element, attr, controller) {
      if (scope.$last) {
        var timeout = null;
        timeout = $timeout(function() {
          controller.initialize();
          $timeout.cancel(timeout);
        });
      }
    }
  });

//Your Code Starts Here

var app = angular.module('App', ['ngMasonry']);

app.controller('Ctrl', function($scope) {
  $scope.list = [{
    name: 'John1',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John2',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John3',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John4',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John5',
    text: ['asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas']
  }, {
    name: 'John6',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John7',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John8',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John9',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }, {
    name: 'John10',
    text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
  }]
})
.grid-item-inner {
  background: #333;
  color: white;
  border: 1px solid red;
  padding: 0px 10px 10px;
  margin: 10px 0;
}
@media (max-width: 992px) {
  .grid-item {
    width: 100%;
  }
}
<html data-ng-app="App">
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="Ctrl">
  <div class="container">
    <div class="row" data-masonry>
      <div class="col-md-4 grid-item" data-masonry-item data-ng-repeat="item in list">
        <div class="grid-item-inner">
          <h3>{{item.name}}</h3>
          <ul class="list-unstyled">
            <li ng-repeat="thing in item.text track by $index">{{thing}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
</body>
</html>

**一般来说，Bootstrap Grid应该使用这种模式：

container or container-fluid
  row
    col-*-*

您目前有行后跟容器。请参阅Grid。

答案 1 :(得分：1)

问题是bootstrap 3使用了浮点数，因此为了使列在不同高度时保持正确对齐，你需要在其中放置一个虚拟的clearfix。

Bootstrap Clearfix

你可以做的一个可选的事情也是将每行包裹在'row'中。所以在你的情况下，每三列应该用一个行包装在它们自己的div中。

这两种解决方案都会在ng-repeat中产生问题，因为您必须按所需的列数对数据进行分组，然后再次嵌套重复。那里的人可能有更好的解决方案。

就像上面提到的charlietfl一样，最不令人沮丧的事情就是使用flexbox。您可以自己编写css或切换到bootsrap 4，但问题是IE中的支持并不是最好的。

您还可以重写列css以使用内联块而不是浮点数，但此时使用bootstrap = P

的重点是什么 
.col-4 {
  width: 32%;
  display:inline-block;
  margin-bottom: 10px;
  vertical-align: top;
}

.col-4:nth-of-type(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}

Like so

相关问题
最新问题