Link 在 window 调整大小后不起作用

Question

我有一个包含 bootstrap div 的页面以及页面上的 2 个图像和按钮。在全屏模式下，页面工作正常。但是，当我调整页面大小时，只有其中一个图像和 2 个按钮中的 1 个起作用。这些图像在全屏中并排显示，但当它们调整大小时，一个图像位于另一个图像之上，顶部按钮和图像无法按下。这是视图。

<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>

Answer 1

我希望这对你有用。

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

看看我们如何...！

或

看看我们如何帮助...！

当我们使用 Bootstrap 创建 table 时，它应该放在 "row" class 的旁边。当您重新调整 window 的大小时，其他一些元素就会出现在所有屏幕的上方。那就是您无法单击图像的方式。在代码的末尾，从底部开始第四行。没有用于结束 "h2" 标签的声明标签。

Answer 2

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

希望对您有所帮助。