twitter-bootstrap – 将雪佛龙置于右侧 – 导航列表

发布时间：2020-12-17 21:26:58 所属栏目：安全来源：网络整理

导读：您好我正在尝试实现可以??在 http://twitter.github.io/bootstrap/components.html#navs找到的导航列表我已查看源代码并且我已尝试使用他们的代码和我自己的代码： div class="span3 bs-docs-sidebar" ul class="nav nav-tabs nav-stacked bs-docs-sidenav s

您好我正在尝试实现可以??在 http://twitter.github.io/bootstrap/components.html#navs找到的导航列表我已查看源代码并且我已尝试使用他们的代码和我自己的代码：

<div class="span3 bs-docs-sidebar">
        <ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
            <li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Arrays</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#"><b>Klasser</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>HTML5</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>CSS3</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>jQuery</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>AJAX</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>PHP</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>MySQL</b><i class="icon-chevron-right"></i></a></li>
            <li><a href="#variables"><b>Twitter Bootstrap</b><i class="icon-chevron-right"></i></a></li>
        </ul>
    </div>

我得到的结果是这样的：

我怎样才能将V形符号放在右边？尝试使用偏移来支付,但是根据字符串的长度,人字形的位置会有所不同.

解决方法

您可以将“pull-right”类添加到图标中：

<ul class="nav nav-tabs nav-stacked bs-docs-sidenav span8">
  <li><a href="#Variabler"><b>Variabler</b><i class="icon-chevron-right pull-right"></i></a></li>
  <li><a href="#Datatyper"><b>Datatyper</b><i class="icon-chevron-right pull-right"></i></a></li>
  <li><a href="#Funktioner"><b>Metoder</b><i class="icon-chevron-right pull-right"></i></a></li>
  ...
</ul>

演示：http://www.bootply.com/66221

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!