angularjs - ngBoilerplate+bootstrap -> 导航栏未显示正确

标签 angularjs twitter-bootstrap-3 boilerplate ngboilerplate

我有这个 ngBoilerplate 框架,我正在尝试构建一个应用程序。我现在真的才刚刚开始,但似乎无法使导航栏具有正确的大小。就像 bootstrab js 和 css 没有正确加载或编译一样。

它现在看起来就像一个大容器,类似于一个大屏幕。但是,如果我将编译 js-es 和 less-es 的行替换为不同引导实例的路径,特别是其 css 和 js,它就可以完美工作。

<!-- compiled CSS --><% styles.forEach( function ( file ) { %>
<link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>

<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

不工作,但是

<link rel="stylesheet" type="text/css" href="path-to-bootstrap-css">
<script type="text/javascript" src="path-to-bootstrap-js"

这个显示得很好。 现在我不太确定是否应该或在哪里告诉 grunt 哪些文件对我来说很重要......我在 build.config.js 文件中尝试过,但它不起作用。

在 src/less/main.less 中,我有一个“@include path-to-bootstrap/less/bootstrap.less”,并且在 bootstrap.less 中加载了所有内容。

因此,作为结论,我的问题是我应该放置什么以及在哪里才能使导航栏正常工作?

要重现我的错误/误解,可以下载(git clone https://github.com/ngbp/ngbp,将 bootstrap 更新为 3.0.3,将 angular-bootstrap 更新为 0.7.0)并编译项目。另外,将引导示例中的导航栏 ( http://getbootstrap.com/components/#navbar ) 添加到 index.html。

如果它看起来不错,正如它应该的那样,它就可以工作。如果没有,而且它看起来又臃肿又巨大,那么你就处于我的位置了。

谢谢!

最佳答案

我看到一个未样式化的页面,顶部显示此内容:

<% styles.forEach( function ( file ) { %> <% }); %> <% scripts.forEach( function ( file ) { %> <% }); %>

原来我正在调查 ..path/ng-boilerplate/src/index.html 代替 ..path/ng-boilerplate/build/index.html 按照自述文件的指示。

关于angularjs - ngBoilerplate+bootstrap -> 导航栏未显示正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21563530/

相关文章:

javascript - 离线时浏览器是否加载缓存图像?

javascript - ng-change 函数没有被调用并且没有错误?

javascript - respond.min.js,第 5 行字符 746,访问被拒绝,在 IE8 中?

css - bootstrap 3 增加网格之间的边距

javascript - AngularJS x-可编辑: Accept numeric input only

html - 具有绝对位置的覆盖元素

c# - 在显式实现接口(interface)时,是否有更好的方法在 C# 中编写这种重复的事件声明代码?

c++ - 如何删除元组初始化 vector 中的样板?

Java 从 DAO 中删除重复的 try、catch、finally 样板文件

javascript - 如何自动将 TypeScript 转译为 JavaScript?