css - Bootstrap viewport/columns mangle 工具提示

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

当与 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/

相关文章:

javascript - AngularJS - 具有特定 JSON 对象的自定义过滤器

angularjs - 将 angular.injector 与 ngAnimate 一起使用

javascript - 访问返回的 Promise 对象数组值

javascript - 使用 JavaScript 滚动时如何将左侧菜单设置为粘性

安卓谷歌浏览器 : CSS3 Responsive Layout Bug

css - 加载外部 css 文件但未应用

css - 如何使用 LESS 使用 Twitter Bootstrap 创建流畅的语义布局?

html - 如何在 CSS 中设置 div 的内边距

css - span10 offset1 未居中

css - SASS/SCSS 对象键值循环