ui-bootstrap列在AngularJS中突破

问题描述：

我是AngularJS的新手，我想默认情况下我是新用户。然而，我对官方的香草Bootstrap并不陌生，所以我有点困惑为什么我的专栏没有对齐。出于某种原因，除非我添加“左拉”或“拉右”类，否则任何大小的列基本上行为都像行，但默认情况下会崩溃。我不知道为什么它的行为如此，因为我已经看到其他一些示例代码对这种格式的列没有任何问题。我已阅读了所有可以找到与ui-bootstrap相关的文档，但没有提及任何有关Bootstrap网格的文档。ui-bootstrap列在AngularJS中突破

这里的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>

还是我失去了一些东西？

你确定你有所有正确的依赖和版本？ https://angular-ui.github.io/bootstrap/ – Scott

我唯一遗漏的是Angular-touch，但是看到它是如何可选的，我不确定如何排除这会影响Bootstrap列。 – mthomp81

答

第一张： col-4-sm不正确。它需要是col-sm-4列宽在最后。

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

希望有所帮助。 :)

我不能相信在使用Bootstrap 3一年后，现在我可以通过代码中的简单触发器对列进行修改。我显然需要更多的咖啡。谢谢未知。我不知道AngularJS实际上有任何布局的花里胡哨，我大多选择它，因为我想尝试做一个SPA。所以Angular方法最适合与Bootstrap的网格方法相比？我想我有一些阅读要做。 – mthomp81

我个人会使用角度材质指令，因为它们与自举类相比为响应式设计应用提供了更多的灵活性。 – Nova

ui-bootstrap列在AngularJS中突破

相关推荐