Javascript RubyonRails显示的登录页与localhost和html文件不同_Javascript_Html_Css_Ruby On Rails_Twitter Bootstrap

Javascript RubyonRails显示的登录页与localhost和html文件不同

javascript html css ruby-on-rails twitter-bootstrap

Javascript RubyonRails显示的登录页与localhost和html文件不同,javascript,html,css,ruby-on-rails,twitter-bootstrap,Javascript,Html,Css,Ruby On Rails,Twitter Bootstrap,我正在为一个网站实现一个登录页，我在网上发现了一个很棒的模板。我加载了所有内容，并正确设置了文件链接和所有内容。当我进入我的视图文件夹并双击html文件时，它会加载，并且看起来很棒，所有的css和js都能完美地工作。问题是，每当我启动brick服务器并从本地主机运行它作为我的实际登录页时，它都是倾斜的，而且比例奇怪加载的大多数文件都来自外部源，即从联机加载的文件和本地加载的文件，只有本地加载的两个文件直接引用。下面是我的代码，直接取自我的文件这是我试图实现的登录页。这是我的密码 <

我正在为一个网站实现一个登录页，我在网上发现了一个很棒的模板。我加载了所有内容，并正确设置了文件链接和所有内容。当我进入我的视图文件夹并双击html文件时，它会加载，并且看起来很棒，所有的css和js都能完美地工作。问题是，每当我启动brick服务器并从本地主机运行它作为我的实际登录页时，它都是倾斜的，而且比例奇怪

加载的大多数文件都来自外部源，即从联机加载的文件和本地加载的文件，只有本地加载的两个文件直接引用。下面是我的代码，直接取自我的文件

这是我试图实现的登录页。

这是我的密码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Grayscale - Free One Page Theme for Bootstrap 3</title>

<!-- Bootstrap Core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<!-- Custom Theme CSS -->
<link href="../../assets/stylesheets/grayscale.css" rel="stylesheet">

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#page-top">
                <i class="fa fa-play-circle"></i>  <span class="light">Start</span> Bootstrap
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#about">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#download">Download</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<section class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Grayscale</h1>
                    <p class="intro-text">A free, premium quality, responsive one page Bootstrap theme created by Start Bootstrap.</p>
                    <div class="page-scroll">
                        <a href="#about" class="btn btn-circle">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about" class="container content-section text-center">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>About Grayscale</h2>
            <p>Grayscale is a premium quality, free Bootstrap 3 theme created by Start Bootstrap. It can be yours right now, all you need to do is download the template on the preview page. You can use this template for any purpose, personal or commercial.</p>
            <p>This striking, black and white theme features stock photographs by <a href="http://gratisography.com/">Gratisography</a> along with a custom Google Map skin courtesy of <a href="http://snazzymaps.com/">Snazzy Maps</a>.</p>
            <p>With this template, just the slightest splash of color can make a huge impact on the overall presentation and design.</p>
        </div>
    </div>
</section>

<section id="download" class="content-section text-center">
    <div class="download-section">
        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Download Grayscale</h2>
                <p>You can download Grayscale for free on the download page at Start Bootstrap. You can also get the source code directly from GitHub if you prefer. Additionally, Grayscale is the first Start Bootstrap theme to come with a LESS file for easy color customization!</p>
                <a href="http://startbootstrap.com/grayscale" class="btn btn-default btn-lg">Visit Download Page</a>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="container content-section text-center">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>Contact Start Bootstrap</h2>
            <p>Feel free to email us to provide some feedback on our templates, give us suggestions for new templates and themes, or to just say hello!</p>
            <p>feedback@startbootstrap.com</p>
            <ul class="list-inline banner-social-buttons">
                <li><a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                </li>
                <li><a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                </li>
                <li><a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg"><i class="fa fa-google-plus fa-fw"></i> <span class="network-name">Google+</span></a>
                </li>
            </ul>
        </div>
    </div>
</section>

<div id="map"></div>

<!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Google Maps API Key - You will need to use your own API key to use the map feature -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>

<!-- Custom Theme JavaScript -->
<script src="../../assets/javascripts/grayscale.js"></script>


灰度-引导3的免费一页主题










灰度
由Start Bootstrap创建的免费、优质、响应迅速的单页引导主题
关于灰度
灰度是由Start Bootstrap创建的优质免费Bootstrap 3主题。它可以是你的现在，所有你需要做的是下载预览页面上的模板。您可以将此模板用于任何目的，无论是个人目的还是商业目的
这一引人注目的黑白主题的特色是由的库存照片以及由的定制谷歌地图皮肤
有了这个模板，哪怕是最轻微的颜色飞溅都会对整个展示和设计产生巨大的影响
下载灰度
您可以在启动引导时的下载页面上免费下载灰度。如果愿意，还可以直接从GitHub获取源代码。此外，灰度是第一个启动引导主题来与一个简单的颜色定制文件少
接触启动引导
请随时给我们发电子邮件，提供一些关于我们模板的反馈，给我们关于新模板和主题的建议，或者只是打个招呼
feedback@startbootstrap.com

所以，我的问题是我做错了什么。运行引导程序有问题吗？有冲突的文件吗？为什么使用服务器加载与仅使用文件加载不同？我完全感到困惑，但我相信这必须是简单的事情

如果您需要我正在运行的文件，它们都可以从引导站点下载到链接中。

查看

您提到在

视图中单击HTML文件可以正确加载登录页
这是一个问题，因为Rails使用了布局
，不引人注目的CSS
和一系列其他依赖驱动元素，确保应用程序尽可能可扩展
问题是如果视图
作为独立文件正确加载，通常表明应用程序的其他方面会干扰它；通常是外部CSS（&C）
--
布局
一个好的测试是禁用特定着陆
操作的布局-
#app/controllers/application_controller.rb
Class ApplicationController < ActionController::Base
   layout false, only: :landing
end

#app/controllers/application_controller.rb
类ApplicationController

这将为您的登录页设置布局为false
。如果你这样做，你将能够看到问题是否消失。如果是这种情况，最好将代码拆分，以便正确使用布局
这将大大有助于您：
如果你发布一张“奇怪比例的css”的图片，效果会很好。我只需要进入我的着陆控制器，输入'layout false，only:：index'，就可以了。非常感谢。这将是非常有帮助的关闭布局在我的许多网页在未来。这是伟大的！我会小心“关闭布局”-Rails的标准实践是为每个视图包含一个布局（它将应用程序模块化）-我会努力将引导视图集成到布局中，而不是禁用布局。您可以使用您知道的不同布局；）