// Toggles .icon-prev, .icon-next, .glyphicon-chevron-left, .glyphicon-chevron-right, .icon { //added ... } .icon-prev, .glyphicon-chevron-left, &.left .icon { //added left: 20%; //edited was 50% } .icon-next, .glyphicon-chevron-right, &.right .icon {//added right: 20%;//edited was 50% }
关于以上修改说明如下：
□通过添加基本的icon类，我们可以使用任意图标，样式都不会出问题；
□&.left 和 &.right 的写法是在嵌套层次中回溯一层，编译之后分别是 .carousel-control .left 和 .carousel-control .right；
□修改left: 和 right: 定位的值之后，让图标更靠近传送带两侧的边界。
保存，编辑，刷新。新的 Font Awesome 图标应该粉墨登场了。
下面，我们对传送带进行一番修饰。
12.2 添加上、下内边距
先给.carousel 元素添加一点上、下内边距，并将背景色设置为 @gray-lighter。
.carousel { position: relative; padding-top:4px; //added padding-bottom:28px;//added background-color:@gray-lighter; //added }
保存编译后，透过新添加的内边距，可以看到传送带中图片上、下方的亮灰色背景。这样就似乎有了一个框，将图片与其上、下的元素隔离开来。
此外，我们还要利用多出来的下边距重新定位传送带指示器，让它更显眼一些。
不过，我们得先让图片在所有情况下都能自动拉伸填充所有空间。
12.3 强制图片全宽
无论屏幕多宽，我们都想让图片保持与屏幕同宽。因为传送带中的图片宽度为1600px，基本可以涵盖大多数屏幕。如果屏幕宽度超过1600px，那右侧就会出现间隙。
强制让图片在1600px 以上的屏幕中也保持全宽，可能导致轻微的像素失真；但如果图片足够大，变形也不至于太明显。
PS:如果时间允许，我们可以采用响应式图片方案，即在小屏幕上加载小图片，给大屏幕使用大图片。
现在我们只要在文件中新增两行代码即可：
.carousel-inner { ... > .item { ... > img, > a > img { &:extend(.img-responsive); line-height: 1; min-width:100%; //added }
做出这个调整后，无论把浏览器窗口拉的多宽，图片都会跟着变宽。
接下来，需要限定传送带的最大高度。
12.4 约束传送带的最大高度
我们发现，在中大型屏幕中，传送带变得太高了。根据设计方案，传送带的高度应该大致在440px。简单，我们只要在图片的父元素 .carousel-inner > .item 上添加这个限制即可：
.carousel-inner { ...
> .item {
...
max-height:640px; //added
因为 .carousel-inner 元素有一条规则是 overflow:hidden，而 .item 元素又被限定了高度，所以图片高度超过最高限制后，其下面的部分会被隐藏起来。
在这一步的基础上，我们可以继续使用嵌套媒体查询（LESS 的另一个方便特性），再利用 Bootstrap 的中、大断点变量，分别调整一下屏幕宽度过宽时图片的垂直定位，从而保证我们的作品处于焦点位置。为此要用到以下代码：
// Account for jankitude on images > img, > a > img { ... // adding media queries to position images @media (min-width:@screen-md-min){ margin-top:-40px; } @media (min-width:@screen-lg-min){ margin-top:-60px; }
保存、编译并刷新。你会发现这时候的传送带已经基本形成，无论宽屏还是窄屏，都有模有样了。
12.5 重定位指示器
传送带指示器的作用是向用户显示一共有几张幻灯片，当前幻灯片是第几张。现在，指示器不是很明显。下面我们把指示器放到它应该在的位置上：图片下方。
(1) 在_carousel.less 中，搜索到注释 // Optional indicator pips，看看这个元素垂直方向的定位距离：
.carousel-indicators { position: absolute; bottom: 10px; ...
(2) 我们打算把它们挪到几乎靠近底边的位置，进入前面添加内边距制造出来的阴影区。调整底部定位的值可以做到。此外，还需要同时把下外边距重置为0。
.carousel-indicators { position: absolute; bottom: 0; //edited margin-bottom:0; //added ...
(3) 找到文件末尾的代码，在针对平板及以上屏幕的代码处：
// Move up the indicators .carousel-indicators { bottom: 20px; }
这是把指示器向上调的，现在我们用不着了。只需要把它注释掉，就不会被编译到CSS中了。
//.carousel-indicators { // bottom: 20px; //}
这样就达到我们目的了。现在，指示器在各种屏幕上的位置都始终如一了。
接下来，我们调整指示器的外观，让它们更大，更显眼一些。
12.6 调整指示器外观
我们要使用灰色相关的变量，把传送带指示器调整得更显眼一些。除了调整颜色，也要把它们调大点。先从 _variables.less 文件开始：
(1) 在 variables.less 中，可以找到以下两个变量。这两个颜色用于默认状态下指示器的边框，还有活动状态下指示器的填充。
@carousel-indicator-active-bg: #fff; @carousel-indicator-border-color: #fff;
(2) 修改代码后，如下：