Question

当与bootstrap的网格结合使用时，似乎angular-ui工具提示很容易被破坏。这是一个说明行为的掠夺者：

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>

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

Answer 1

我有同样的事情发生在我身上。我鼓励您仔细检查控制器和CSS的自举部分，以寻找试图对齐相同元素的代码。默认情况下，这些显示网格的数据将很好地对齐。通常bootstrap允许您在控制器中放置一些布局配置，并且因为我们是习惯的生物，所以我们将在CSS中执行相同的操作。尽量在控制器中定义尽可能多的网格布局。我查看了文档，并按照对齐规则来分配t，分配我想要一切变量，$ scope.MyDefs，并集中在我的控制器的ui-grid部分内的定义，我可以缩小和增长我的屏幕和一切都会留在原地。这是一个非常简单的解决方案，让我坚持了好几天。

Bootstrap视口/列mangle工具提示

1 个答案: