Question

我是AngularJS的新手，我猜默认我是ui-bootstrap的新手。但是，我对官方的香草Bootstrap并不陌生，所以我有点困惑为什么我的列没有对齐。出于某种原因，任何大小的列基本上只是表现得像行，除非我添加＆＃34;拉左＆＃34;或＆＃34;拉右＆＃34;类，但默认情况下只是分解。我不知道它为什么会这样，因为我已经看到其他部分的示例代码没有这种格式的列的任何问题。我已经阅读了所有与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列宽在最后。

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

希望有所帮助。：）

ui-bootstrap列在AngularJS中中断

1 个答案: