【问题标题】:Am I Missing something from within this <head> tag?我在这个 <head> 标记中遗漏了什么吗?
【发布时间】:2014-11-03 09:15:06
【问题描述】:

这是一个使用 Bootstrap 2.3 的 rails 项目。我是新手。我仅从索引页面遇到链接问题。我有 5 个视图(主页、关于 Traderoom、BIOS 和联系人)如果我在关于页面上,所有链接都可以正常工作。如果我在主页(Index.html.erb) 页面上,则无法单击 TradeRoom、Bio 或 Contact。我只能点击关于我们。此外,我如何确定我的 Assets 文件夹中有所有必要的引导文件?下载 Bootstrap 后,我首先对 NAVBAR 进行了编码,它应该会崩溃。由于它崩溃了,我认为我拥有所有必要的引导文件。

布局/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>TraderTwitch Live</title>

    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">TraderTwitch.com</a>
          <div class="nav-collapse">
              <ul class="nav">
                <li><%= link_to "Home",home_index_path %></li>
                <li><%= link_to "About",home_about_path %></li>
                <li><%= link_to "LIVE Trading Room",home_traderoom_path %></li>
                <li><%= link_to "Bios",home_bio_path %></li>
                <li><%= link_to "Contact Us",home_contact_path %></li>
              </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
    <%= image_tag 'Zlan.png' %>
    </div> 
    <br>
    <div class="container">
        <div class="row">
            <div class="span10"><%= yield %></div>
            <div class="span2">
                <strong><p style="text-align:center; font-size:20px">Real-Time <br>Trade Results</p></strong>   
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="row">
                <div class="span2">
                <h6>Copyright &copy; 2014 TraderTwitch.com</h6>
                </div>

                <div class="span4">
              <h6>About Us</h6>
              <p>We are going to be te best Futures Trading Room, PERIOD !!</p>
                </div>

                <div class="span2">
              <h6>Navigation</h6>
              <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">LIVE Trading Room</a></li>
                  <li><a href="#">Bios</a></li>
                  <li><a href="#">Contact Us</a></li>
              </ul>
                </div>

                <div class="span2">
                <h6>Follow Us</h6>
                      <ul>
                          <li><a href="#">Twitter</a></li>
                          <li><a href="#">Facebook</a></li>
                          <li><a href="#">Google Plus</a></li>
                          <li><a href="#">YouTube</a></li>
                     </ul>
                </div>
            </div>
        </div>
    </footer> 
  </body>
</html>

home/index.html.erb

<div class ="row">
    <div class="span10">
        <div class="well"> 
            <h2>Hello Traders, </h2>
            <p class="lead"> &nbsp &nbsp &nbsp &nbspLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </br></br>



            <h3>Our Thinking is .......</h3>
            <p class="lead">&nbsp &nbsp &nbsp &nbsp Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </br>
            </br>

            We look forward to seeing you in the TradeRoom !
            </p>
            <a href="#myModal" role="button" class="btn btn-large  btn-info" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Keep Me Posted</a>

        </div>
    </div>
</div>


<div class="modal fade" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">We're shooting for a Nov 10 '14 launch</h4>
    </div>
    <div class="modal-body">
        <h3 style="text-align:center"><a href="mailto:info@tradertwitch.com">EMAIL: Info@TraderTwitch.com</a></h3> 

        <h4 style="text-align:center">Email us to stay in the loop. </h4> 
        <hr>

        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputEmail">Email:</label>
                <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputTwitter">Twitter User</label>
                <div class="controls">
                <input type="text" id="inputTwitter" placeholder="Twitter User">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputSession">Primary Trading Session</label>
                <div class="controls">
                    <select name="selTradingSession">
                        <option value"0">U.S. Session</option>
                        <option value"1">European Session</option>
                        <option value"2">Asian Session</option>
                    </select>
                </div>
                <br>
                <div class="text-center"><button type="submit" class="btn">Send</button></div>
            </div>

            <p><small class="text-muted">*We will not give out your email or twitter handle.</small></p>
        </form>
    </div> 
</div> 

home_controller.rb

class HomeController < ApplicationController
  def index
  end

  def about
  end

  def contact
  end

  def traderoom
  end

  def testimonials
  end

  def bio
  end
end

config\routes.rb

Tradertwitch::Application.routes.draw do
  get "home/index"
  get "home/about"
  get "home/contact"
  get "home/traderoom"
  get "home/testimonials"
  get "home/bio"
  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

  # You can have the root of your site routed with "root"
  root 'home#index'

【问题讨论】:

  • “我无法点击”是什么意思?你能发布渲染的 HTML、你的 home 控制器和路由吗?
  • 我现在正在获取控制器和路由,但您可以在此处查看实际页面。 tradertwitch.herokuapp.com
  • 好的,我在上面添加了 home_contoller 和路由。

标签: jquery html ruby-on-rails twitter-bootstrap twitter-bootstrap-2


【解决方案1】:

这是因为有一个不可见的模式窗口阻止了链接(id myModal)。摆脱模态,它会起作用。

【讨论】:

  • 我认为模态触发按钮需要 id="myModal" 才能调用模态?
  • 这是可能的,但无论如何这就是阻止您的链接的原因。也许你实施不正确?尝试删除模式,然后根据引导文档再次添加。您的实现中可能存在一些错误(例如拼写错误)。
  • 它没有用。链接仍然无效。然后模态没有它也不会打开。嗯
  • 哦,好吧,我之前没明白你的意思。我刚刚注释掉了整个模式代码,现在链接可以工作了。您在我的模态代码中看到任何可能导致此问题的内容吗?
  • 我如何确定我拥有实现模态所需的所有必要 Jquery 和 Javascript 文件?
【解决方案2】:

啊!!!

我转过这个

<div class="modal fade" id="myModal">

进入这个

<div class="modal hide fade" id="myModal">

现在所有链接都可以正常工作了。模态淡化允许模态按设计打开,但它导致我的 NAVBAR 链接出现问题。

为什么“模态淡化”在没有“隐藏”的情况下工作?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-11-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多