bootstrap 与 <a> 一起使用时，警报信息文本在移动设备中变得不可读

Question

我在 bootstrap class alert-info 中使用带有 <a></a> 的文本，它适用于大屏幕，但是当我从移动设备或我打开该页面时使 window 变小，然后文本变得不可读。但是，如果我在没有 <a></a> 标签的情况下使用它，那么就可以了。

    <br>
    <div>
          <a class="alert alert-info" href="/process/info/"><?php echo $oFontawesome->icon(array('icon'=>'external-link')).' '._('This case contains an course info that you need to pay. Please register your payment through "Payments".');?></a>
    </div>

Answer 1

您不应该在 <a> 中使用 .alert，因为 <div> 具有属性 'display:block' 而 <a> 没有。如果你真的想在<a>中使用.alert，你需要为元素添加一个样式：

<a class="alert alert-info"
   style="display:block">
      This case contains an course info that you need to pay. Please register your payment through "Payments"
</a>

或者您可以将 <a> 标签放在 <div>:

<div>
  <a class="alert alert-info">
        This case contains an course info that you need to pay. Please register your payment through "Payments"
  </a>
</div>

bootstrap 与 <a> 一起使用时，警报信息文本在移动设备中变得不可读

bootstrap alert-info text gets unreadable in mobile device when use with <a>

user-interface

href

responsive-design

twitter-bootstrap