调整窗口大小后链接不起作用

时间:2015-10-27 05:23:37

标签: html css ruby-on-rails bootstrap-sass

我有一个带有bootstrap div的页面,页面上有2个图像和按钮。在全屏幕中,页面工作正常。但是当我调整页面大小时,只有一个图像和2个按钮中的一个工作。图像是全屏并排的,但是当它们调整大小时,一个是在另一个上面,顶部按钮和图像无法按下。这是观点。

<div class="jumbotron">
  <div class="center-block">
    <img src="https://s3.amazonaws.../Frontpage_logo.png"  class="img-responsive" alt="...">
  </div>
  <div class="text-center">
  <br/>
  <br/>
  <% if user_signed_in? %>
      <%= link_to 'Your Dashboard', users_dashboard_url, class: 'btn btn-primary' %>
  <% elsif manager_signed_in? %>
      <%= link_to "Your Dashboard", managers_dashboard_url, class: 'btn btn-primary' %>
  <% elsif admin_signed_in? %>
      <%= link_to "3rd Party/Supplier Dashboard", admins_dashboard_url, class: 'btn btn-primary' %>
<br/>
    <br/>
      <%= link_to 'Monitoring', sidekiq_web_path %>
  <% else %>
    <div class="container-fluid">
      <div class="col-md-5">
        <div class= "pull-left">
          <h3><strong>See how we ...!</strong></h3>
            <a href="/managers/why_use_us"><img src="https://s3.amazonaws.../manager_video.jpg" class="img-responsive"></a>
            <br>
            <%= link_to "Manager", managers_why_url, class: 'btn btn-primary' %>
        </div>
      </div>
    <div class="col-md-2">
      <div class="text-center">
        <h2>or</h2>
      </div>
    </div>
    <div class="col-md-5">
      <div class= "pull-right">
        <h3><strong>See how we are helping ...!</strong></h3>
          <a href="/users/why_choose_us"><img src="https://s3.amazonaws.../user_video.jpg" class="img-responsive"></a>
          <br>
          <%= link_to "Tenant", users_why_url, class: 'btn btn-primary' %>
      </div>
    </div>
  </div>

  </h2>
</div>
  <% end %>
</div>

2 个答案:

答案 0 :(得分:1)

如果您希望在调整大小时将图像并排放置而不重叠,请将col-md-*更改为col-xs-*。这样休息吧。

我希望这会有所帮助。

答案 1 :(得分:0)

我希望这适合你。

请尝试使用此代码而不是您的代码。我做了一些小改动。

                                                    
            
                                                                                          
            
                                                                                                                                  

了解我们的方式......!

                                                         
                                                                                                                                                     

                                                                                                                        

了解我们如何帮助......!

                                                         
                                                                                                                               

当我们使用Bootstrap创建表格时,它应该放在&#34; row&#34;类。当你重新调整窗口大小时,其他一些元素就会出现在所有屏幕之上。这是你无法点击图像的方式。并在代码的末尾从底部开始第4行。关闭&#34; h2&#34;没有说明标签。标签。