【发布时间】：2014-09-13 18:34:00
【问题描述】：
尝试将名为landon 的引导主题导入到我的rails 应用程序中，但无法使CSS 文件正常工作。
安装了引导 gem (bootstrap-sass 3.1.1.1) 创建了一个 css.scss
并添加行@import 'bootstrap';
将 html 代码复制并粘贴到 home.html.erb 中，所以当我运行 Web 应用程序时，我会得到很酷的文本
所以要设置样式，我有两个文件 main.css 和 bootstrap.css 文件 不确定我是否需要复制 bootstrap.css 文件，因为我有 bootstrap gem。
所以已将 main.css 复制到 css.scss 文件中
还向 javascript 文件添加了 //= 需要引导程序
home.html.erb
<body>
<div class="preloader"></div>
<! -- ******************** MASTHEAD SECTION ******************** -->
<main id="top" class="masthead" role="main">
<div class="container">
<div class="logo">
<!-- <a href="index.html#"><img src="images/logo.png" alt="logo"></a> -->
<a href="index.html#"></a>
</div>
<h1>Helping <strong>Mum's</strong><br>
make better choices with their <strong>kids</strong></h1>
<div class="row">
<div class="col-md-6 col-sm-12 col-md-offset-3 subscribe">
<div class="indicates-required" style="display:none;"><span class="asterisk">*</span> indicates required</div>
<form action="//ubiquate.us6.list-manage.com/subscribe/post?u=bb0f5fdb70a640208cb0ecaa8&id=16a7a49314" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<!-- <form class="form-horizontal" role="form" action="subscribe.php" id="subscribeForm" method="POST"> -->
<div class="form-group">
<div class="col-md-7 col-sm-6 col-sm-offset-1 col-md-offset-0">
<input class="form-control input-md required email" value="" name="EMAIL" type="email" id="address mce-EMAIL" placeholder="Enter your email" data-validate="validate(required, email)" required="required">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div class="col-md-5 col-sm-4">
<div style="position: absolute; left: -5000px;"><input type="text" name="b_bb0f5fdb70a640208cb0ecaa8_16a7a49314" tabindex="-1" value=""></div>
<div class="clear"><button type="submit" id="mc-embedded-subscribe" class="btn btn-success btn-lg">GET EARLY ACCESS</button>
</div>
</div>
</form>
<span id="result" class="alertMsg"></span> </div>
</div>
<a href="index.html#explore" class="scrollto">
<p>SCROLL DOWN TO EXPLORE</p>
<p class="scrollto--arrow"><img src="images/scroll_down.png" alt="scroll down arrow"></p>
</a>
</div><! --/container -->
</main><! --/main -->
<! -- ******************** TESTIMONIALS SECTION ******************** -->
<div class="highlight testimonials">
<div class="container">
<div class="section-title">
<h2>What our customers said</h2>
<h4>Don't take our word. See our testimonials </h4>
</div>
<section class="row breath">
<div class="col-md-6">
<div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
<div class="clientblock">
<img src="images/customer-img-1.jpg" alt=".">
<p><strong>John Doe</strong> <br>
Founder of <a href="index.html#">Blacktie.co</a>
</p>
</div>
</div><! --/col-md-6 -->
<div class="col-md-6">
<div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
<div class="clientblock">
<img src="images/customer-img-2.jpg" alt=".">
<p><strong>Richard Sommer</strong> <br>
CEO of <a href="index.html#">Blacktie.co</a>
</p>
</div>
</div><! --/col-md-6 -->
</section><! --/section -->
</div><! --/container -->
</div><! --/highlight Testimonials -->
<! -- ******************** FOOTER ******************** -->
<main class="footercta" role="main">
<div class="container">
<h1>The Most Simple & <strong>Powerful Way</strong> <br>
to <strong>launch</strong> your product</h1>
<div class="row">
<div class="col-md-12 breath text-center">
<a href="index.html#top" class="btn btn-success btn-lg gototop">GET EARLY ACCESS</a>
</div>
</div>
</div><! --/container -->
</main><! --/main -->
<div class="container">
<section class="row breath">
<div class="col-md-12 footerlinks">
<p>© 2014 FoodBuddy. All Rights Reserved</p>
</div>
</section><! --/section -->
</div><! --/container -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/easing.js"></script>
<script src="js/nicescroll.js"></script>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
</script>
<script>
$(function() {
$('.scrollto, .gototop').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>
</body>
【问题讨论】：
-
你在哪里添加了
@import 'bootstrap';，如果正在应用引导类的样式，你是否手动检查了其他页面？ -
嗨 mandeep 将该行添加到名为 bootstrap_and_customisation.css.scss 的文件中，我检查了其他页面、联系人、关于等，它具有引导样式
-
所以它不仅仅适用于您的主页？
-
是的，其他页面我已经复制并粘贴了 css 文件，但现在出现空白屏幕
-
您所说的
i have copied and pasted the css file but now get a blank white screen是什么意思，您的主页使用的是哪个布局文件？你在那个布局文件中需要 application.css 吗？您的 application.css 是否需要您的 bootstrap_and_customisation 文件？
标签： html css ruby-on-rails ruby twitter-bootstrap