Question

我想在列表中的项目旁边显示一个红色的“X”作为删除项目的链接。

我看过我可以在bootstrap中使用帮助程序类使文本变为红色： http://getbootstrap.com/css/#helper-classes

<ul>
  <li>
    <a href="/regions/91">Wales</a>
    <span class="text-danger">
      <a data-confirm="Are you sure?" data-method="delete" href="/regions/91" rel="nofollow">X</a>
    </span>
  </li>
</ul

Answer 1

只需将text-danger类添加到<a>标记本身。

像这样（选项1）：

<ul>
  <li>
    <a href="/regions/91">Wales</a>
    <a class="text-danger" data-confirm="Are you sure?" data-method="delete" href="/regions/91" rel="nofollow">X</a>
  </li>
</ul>

或者这（选项2）：

<ul>
  <li>
     <a href="/regions/91">Wales</a>
     <a data-confirm="Are you sure?" data-method="delete" href="/regions/91" rel="nofollow">
         <span class="text-danger">X</span>
     </a>
  </li>
</ul>

Here is a fiddle for both options

Answer 2

Demo

<ul>
  <li>
    <a href="/regions/91">Wales</a>
        <a data-confirm="Are you sure?" data-method="delete" href="/regions/91" rel="nofollow"><span class="text-danger">X</span></a>
  </li>
</ul>

与您组织的所有事情的顺序有关。锚标记已应用CSS，会覆盖您的span标记的CSS。通过反转它们，我们应用锚样式，然后text-danger。

Bootstrap红色列表文本无效

2 个答案: