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

至尊A

我有一个页面，其中包含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>

哈桑坠落

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

我希望这有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。