小编Leo*_*sta的帖子

我正在尝试在我的rails应用程序中使用http://startbootstrap.com/stylish-portfolio但是我的Stylish-portfolio.css.scss.erb文件中出现以下错误:

ActionView::Template::Error (Invalid CSS after "body ": expected selector or at-rule, was "{"

这是我的css文件:

@import 'bootstrap'

/* Global Styles */

html,
body {
  height: 100%;
  width: 100%;
}

.vert-text {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.vert-text h1 {
  padding: 0;
  margin: 0;
  font-size: 4.5em;
  font-weight: 700;
}

...

我一直在尝试使用http://startbootstrap.com/stylish-portfolio并在下载所有文件并复制到目录后,我在部分_bordered-pull上收到以下错误:

ActionView::Template::Error (Undefined variable: "$fa-css-prefix".

但是,变量已定义,我正在导入(或至少尝试)部分变量.

我的资产/样式表目录如下:

--application.css.scss
--bootstrap.css.scss
--font-awesome.css.scss.erb
--stylish-portfolio.css.scss
--|font-awesome
  --_bordered-pulled.css.scss
  --...(other partials)
  --font-awesome.css.scss

Application.css.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll …

我有一个用于在幻灯片之间导航的引导按钮.该按钮在Chrome中完美运行,但在Firefox中无效.在第一张幻灯片中,它可以正常工作,但只要我移动到第二张幻灯片并单击按钮转到第三张幻灯片,按钮就会从页面中消失.我已经检查过了jquery-ui在boostrap js之前加载.

生成的HTML:

<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fullPage.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

在Firebug中我收到以下错误:

Error: TypeError: document.getElementById(...) is null
Source File: chrome://web-developer/content/overlay/javascript/overlay.js
Line: 7333

这是我的代码:

<script type="text/javascript">
    $(document).ready(function() {
        $.fn.fullpage({
            fixedElements: '.btn-success',
            'verticalCentered': false
        });

        $('.btn-success').click(function(){ …

我正在尝试使用光滑的旋转木马(https://github.com/kenwheeler/slick),他们有一个slickNext()触发旋转木马下一张幻灯片的方法.

现在我的html文件看起来像这样:

<div class="slick-slider">
  <div><%= image_tag "1.jpg"%></div>
  <div><%= image_tag "1.jpg"%></div>
  <div><%= image_tag "1.jpg"%></div>
</div>

<i class="fa fa-angle-right"></i>


<script type="text/javascript">
$("fa-angle-right").click(function(e) {
    $("fa-angle-right").slickNext();
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.slick-slider').slick({
            dots: true
        });
    (jQuery)});
</script>

但是这不起作用,我无法弄清楚原因.谢谢