当与 bootstrap 的网格一起使用时,angular-ui 工具提示似乎很容易被破坏。这是一个说明行为的 plunker:
http://plnkr.co/edit/gVekao4JCdC5O91RCoiW?p=preview
<!doctype html>
<html ng-app="tooltip_app">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script>
angular.module('tooltip_app', ['ui.bootstrap']);
</script>
</head>
<body>
<br/><br/><br/><br/><br/>
<div class='container'>
<!--Row 1 - bad tooltip -->
<div class="row">
<div class="col-md-2">2 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">bad</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-8">8</div>
</div>
<hr>
<!--Row 2 - good tooltip -->
<div class="row">
<div class="col-md-8">8 <span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">good</span>
</div>
<div class="col-md-2">2</div>
<div class="col-md-2">2</div>
</div>
<hr>
<!--Row 3 - egregious tooltip -->
<div class="row">
<div class="col-md-9">9
<div class="row">
<div class="col-md-2">2 (nested)
<span tooltip="This is a real long tooltip designed to show you how tooltips have funny behaivior depending on bootstrap column width">worst</span>
</div>
<div class="col-md-10">10 (nested)</div>
</div>
</div>
<div class="col-md-3">3</div>
</div>
</div> <!--End Container-->
</body>
</html>
请注意,当视口(viewport)较小时,一切正常,但随着视口(viewport)越来越宽,工具提示开始变得压缩和错位。这种行为是预期的吗?如果是这样,我如何确保我的工具提示与它们应该指向的内容保持一致?
最佳答案
我也遇到过同样的事情。我鼓励您仔细检查 Controller 和 CSS 的自举部分,看看是否有试图对齐相同元素的代码。默认情况下,这些显示网格的数据会很好地对齐。通常 bootstrap 允许你在你的 Controller 中放置一些布局配置,并且因为我们是习惯的产物,所以我们会在我们的 CSS 中做同样的事情。尝试在 Controller 中定义尽可能多的网格布局。我检查了文档并遵循了 t 的对齐规则,将我想要的所有内容分配给变量 $scope.MyDefs 并专注于我 Controller 的 ui-grid 部分中的定义,我可以缩小和扩大我的屏幕和一切都会留在原地。这是一个非常简单的修复,让我连续几天发疯。
关于css - Bootstrap viewport/columns mangle 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28178401/