引导视口/列损坏工具提示答案

【问题标题】：Bootstrap viewport/columns mangle tooltips引导视口/列损坏工具提示
【发布时间】：2015-01-28 04:21:30
【问题描述】：

似乎 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>

请注意，当视口较小时，一切正常，但随着视口越来越宽，工具提示开始变得压缩和错位。这种行为是预期的吗？如果是这样，我如何确保我的工具提示与它们应该指向的东西保持一致？

【问题讨论】：

标签： css angularjs twitter-bootstrap tooltip angular-ui-bootstrap

【解决方案1】：

我也遇到过同样的事情。我鼓励您仔细检查控制器的引导部分和 CSS 是否有尝试对齐相同元素的代码。默认情况下，这些数据显示网格会很好地对齐。通常引导程序允许您在控制器中放置一些布局配置，并且因为我们是习惯的生物，我们将在我们的 CSS 中做同样的事情。尝试在控制器中定义尽可能多的网格布局。我检查了文档并遵循了 t 的对齐规则，将我希望所有内容的外观分配给变量 $scope.MyDefs 并专注于控制器的 ui-grid 部分中的定义，我可以缩小和扩大我的屏幕和一切都会留在原地。这是一个非常简单的解决方案，让我连续几天发疯。

【讨论】：

您是否建议我使用 ui-grid 作为引导程序布局类（行、md-col）的替代品？ ui-grid 是用于页面布局还是用于数据表？
我唯一的想法是也许同样的问题正在发生。 NG-Grid 和 UI-Grid 使用引导程序。如果您有兴趣，这里有一些文档。 angular-ui.github.io/ng-grid