你必须按"整页"查看附加的片段显示。
我想排列我的选项以使它们对齐,复选标记位于左侧。
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Showing: C
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="##">A</a></li>
<li><a href="##">B</a></li>
<li><a href="##">✓ C</a></li>
<li><a href="##">D</a></li>
<li><a href="##">E</a></li>
</ul>
</li>
</ul>
</div>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
&#13;
答案 0 :(得分:2)
这是一个使用字体真棒(或字形)的例子。
.checked {
position: relative;
}
.checked:before {
content: "\f00c";
font-family: FontAwesome;
font-size: 12px;
padding-right: 0;
position: absolute;
top: 0px;
right: 5px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Showing: C
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="##">A</a>
</li>
<li><a href="##">B</a>
</li>
<li><a href="#"><i class="checked"></i> C</a>
</li>
<li><a href="##">D</a>
</li>
<li><a href="##">E</a>
</li>
</ul>
</li>
</ul>
</div>
&#13;
或以UTF-16十六进制
.checked {
position: relative;
}
.checked:before {
content:"\2713";
font-size: 14px;
padding-right: 0;
position: absolute;
top: 0px;
right: 5px;
}