Question

我有一个导航堆叠列表，其中包含支票，如下所示。有什么方法可以将支票移到物品的右侧或左侧，这样当物品处于活动状态时，他们不会掩盖支票吗？

这是我的fiddle

＆＃13;

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home <i class="glyphicon glyphicon-ok pull-right"></i></a>
  </li>
  <li role="presentation"><a href="#">Profile <i class="glyphicon glyphicon-ok pull-right"></i></a>
  </li>
  <li role="presentation"><a href="#">Messages <i class="glyphicon glyphicon-ok pull-right"></i></a>
  </li>
</ul>

＆＃13;

Answer 1

稍微更改标记，将其移到锚点之外。

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active">
    <a href="#">Home</a>
    <i class="glyphicon glyphicon-ok pull-right"></i>
  </li>
  <li role="presentation">
    <a href="#">Other</a>
    <i class="glyphicon glyphicon-ok pull-right"></i>
  </li>
</ul>

.nav .active {
  overflow: hidden;
}
.nav .active a {
  width: 80%;
  float: left;
}
.nav i {display:none;}
.nav .active i {
  margin: 12px 14px 0 0;
  display: block;
}

编辑：Fiddle

Answer 2

您也可以通过添加以下CSS将白色（或不同颜色）背景添加到选中标记处：

.nav-pills>li.active>a i {
  color: green;
  background: #fff;
  padding: 0.25rem;
  border-radius: 0.5rem;
}

https://jsfiddle.net/karolbrennan/uc5xfsso/

在导航堆叠项目旁边放置字形图标

2 个答案: