[@carousel-indicator-bg: @gray-light; //新增默认的背景色,作为默认状态下指示器的填充色 @carousel-indicator-active-bg: @gray-lightest; //活动状态下的背景色 @carousel-indicator-border-color: transparent; //设置为透明
(3) 保存、编译并刷新。
至此，除了让活动状态下的指示器不可见，其他样式都就绪了。
下面再打开_carousel.less 。
(1) 找到下面的规则：
.carousel-indicators {
position: absolute;
...
(2) 找到嵌套其中的 li 选择符。在这里需要修改几个值:
□ 把 width 和 height 增大到 18px；
□ 删除外边距
□ 添加background-color 声明，值设置为新变量 @carousel-indicator-bg；
□ 删除边框线（前面把边框变量设置为透明，就是为了这里安全）；
□ 为所有修改和新增添加注释，如下所示：
li { display: inline-block; width: 18px; //edited height: 18px; //edited //margin: 1px; //edited text-indent: -999px; background-color:@carousel-indicator-bg; //added //border: 1px solid @carousel-indicator-border-color; //edited border-radius: 10px;
(3) 注意下面这两个针对IE8-9 的手法，它们在这两个浏览器中为指示器提供背景颜色。因为我们已经给所有指示器都提供了背景色，所以这几行就没有必要了。这里把它们都注释掉，以免干扰前面声明的背景色。
//background-color: #000 \9; // IE8
//background-color: rgba(0,0,0,0); // IE9
(4) 接下来，再注释掉 .active 选择符下面的 margin、width、height，因为我们不希望活动状态下的指示器变小，如下图所示：
修改后的代码如下：
.active { //margin: 0; //edited //width: 12px; //edited //height: 12px; //edited background-color: @carousel-indicator-active-bg; }
(5) 最后，与 .active 选择符并列添加一个 :hover 选择符，增加悬停效果：
复制代码 代码如下:
li:hover, //added .active { ...
(6) 保存，并编译，可以看到显示效果如下：
这样，传送带的调整工作就做完了。
13.调整分栏及其内容
下面我们来调整下位于标题 Welcome!、Recent Updates、Our Team 下面的三个内容块。
首先，为每个块中的按钮添加圆圈箭头图标。这里还是使用 Font Awesome 图标。
(1) 查看其文档：
(2) 找到想要使用的图标：
(3) 在 html文档中，为每个链接添加带有适当类的 span 标签。下面是第一个链接添加代码后的结果：
<a href="#">See our portfolio <span></span> </a>
(4) 每个链接都如此。这样，每个按钮上就都有了相同的图标了。
再给文本块与传送带直接增加一些垂直内边距，现在太紧了。
(1) 在 less 文件夹下新建文件_page-content.less，用以保存这些修改及其他改动。
// //Page Contents // ---------------------------- .page-contents { padding-top:20px; //上边距 padding-bottom:40px; //下边距 }
(2) 在 __main.less 文件中导入该文件：
//Other custom files
@import "_page-content.less";
(3) 下面再在标记中添加必要的类。打开html文档，给带有 container 类的 div 元素添加 page-contents 类，就在传送带的结束标签处。
<div> <div>
接下来，我们再对窄屏幕下这些块的效果进行调整。如下图所示，在一栏布局时，标题并没有清除相邻的按钮。
