ui-bootstrap 列插入 AngularJS

Question

我是 AngularJS 的新手，我想默认情况下我是 ui-bootstrap 的新手。但是，我对官方香草 Bootstrap 并不陌生，所以我有点困惑为什么我的列没有对齐。出于某种原因，除非我添加 "pull-left" 或 "pull-right" 类，否则任何大小的列基本上都表现得像行，但默认情况下只是分解。我不知道为什么会这样，因为我已经看到示例代码的其他部分对这种格式的列没有任何问题。我已经阅读了所有我能找到的与 ui-bootstrap 相关的文档，但没有提及任何关于 Bootstrap 网格的内容。

这是 Plunker：https://embed.plnkr.co/txDqsQHqLrmhrpS0Wyl9/ （我知道菜单在这里不起作用，这是固定在这个项目的本地版本上的。）

而且...这应该有效，对吧？

<div class="container-fluid">
<div class="row">
  <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: pink;">First Col
  </div>
  <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: cyan;">Second Col
  </div>
  <div class="col-lg-4 col-md-4 col-4-sm col-4-xs" style="background-color: lightgreen;">Third Col
  </div>
</div>

还是我遗漏了什么？

Answer 1

首先： col-4-sm 不正确。它需要 col-sm-4 列宽在最后。

第二个：如果您使用 angular material，我建议您使用布局指令来控制内容位置。参见 - https://material.angularjs.org/latest/layout/container

希望对您有所帮助。 :)

ui-bootstrap 列插入 AngularJS

ui-bootstrap columns break in AngularJS

angularjs

twitter-bootstrap-3

row

angular-ui-bootstrap

col