AngularJs+;引导:下拉菜单缺少彼此之间的间隙
当我试图使用angularjs呈现一些引导下拉列表时,UI有一个奇怪的问题:每个下拉列表之间的间隔消失了,如图所示(参见前两个下拉列表) 这是我的代码:AngularJs+;引导:下拉菜单缺少彼此之间的间隙,angularjs,twitter-bootstrap,drop-down-menu,Angularjs,Twitter Bootstrap,Drop Down Menu,当我试图使用angularjs呈现一些引导下拉列表时,UI有一个奇怪的问题:每个下拉列表之间的间隔消失了,如图所示(参见前两个下拉列表) 这是我的代码: var lcApp = angular.module('lcApp', [], function () {}); lcApp.factory('historyService', function() { return { filters: [ { name: 'year', l
var lcApp = angular.module('lcApp', [], function () {});
lcApp.factory('historyService', function() {
return {
filters: [
{ name: 'year', label: 'Năm', type: 'dropdown', value: '', options: [{ label: '2014', value: '2014' }, { label: '2013', value: '2013' }, { label: '2012', value: '2012' }] },
{ name: 'month', label: 'Tháng', type: 'dropdown', value: '', options: [{ label: '2014', value: '2014' }, { label: '2013', value: '2013' }, { label: '2012', value: '2012' }] }
]
};
});
lcApp.controller('historyController',
function ($scope, $rootScope, $location, $log, $window, historyService) {
// get filter data
$scope.filterData = historyService.filters;
$log.info('Load filters success');
// filter click
$scope.filterClick = function(filter, option) {
filter.value = option.value;
};
});
用户界面:
<div class="btn-group" ng-repeat="flt in filterData">
<a class="btn btn-default btn-sm" href="" data-toggle="dropdown" data-hover="dropdown">Tháng</a>
<ul class="dropdown-menu">
<li>
<a href="">
<i class="fa fa-pencil"></i> Edit </a>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default btn-sm" href="" data-toggle="dropdown" data-hover="dropdown">Ngày</a>
<ul class="dropdown-menu">
<li>
<a href="">
<i class="fa fa-pencil"></i> Edit </a>
</li>
</ul>
</div>
<div class="portlet-input input-inline input-medium">
<div class="input-icon right">
<i class="icon-magnifier"></i>
<input type="text" placeholder="tên hoặc email" class="form-control">
</div>
</div>
-
-
没有什么特别的,只是一个ngRepeat指令,将我的过滤器呈现为下拉列表。删除
btn组的包装,它们使按钮堆叠在一起。按钮是否附加了边距:0
?嗨,使用firebug识别HTML,DOM元素中没有添加任何特别的内容,它们都是一样的,我真的不知道为什么,在Chrome和Firefox上测试:(我猜它们是内联块
元素,要么设置了一些边距,要么浏览器的默认边距没有设置为0。没有使用边距来填补它们之间的空白,我仍然不知道为什么会有空白。不需要有边距。如果不设置为0,浏览器有时会实现边距。)这就是为什么我们使用CSS重置和规范化程序。