Question

我动态显示需要在容器div中居中的3个或4个div。如何根据静态引导列值确保div始终居中？

<div>    
    <div class="col-md-3">foo</div>
    <div class="col-md-3" ng-show="settings.isShown">bar</div>
    <div class="col-md-3">foo</div>
    <div class="col-md-3">bar</div>
</div>

Answer 1

看起来你正在与AngularJS配对

在这种情况下，您可以将ng-class上的三元运算符应用于<div>，以便根据settings.isShown的状态动态更改类：

<div>    
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">foo</div>
    <div class="col-md-3" ng-show="settings.isShown">bar</div>
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">foo</div>
    <div ng-class="(settings.isShown) ? 'col-md-3' : 'col-md-4'">bar</div>
</div>

此解决方案假设您使用的是Angular 1.1.5或更高版本（从那时起它们只添加了三元运算符支持）

有关使用AngularJS将条件类应用于元素的其他选项，请参阅https://stackoverflow.com/a/12151555/648350

如何使用bootstrap中心动态数量的div？

1 个答案: