我有一个Twitter引导程序轮播在我的网页上工作得很好，但我不能让侧箭头表现我想要的方式。我的CSS知识可能是10分中的5分。
目前，“字形”箭头绝对位于窗口的左右边缘。当我缩小或增大窗口时，这些箭头与窗口边缘保持完全相同的距离。这是奇怪和错误的，因为它们遍布旋转木马图像的顶部。我希望它们保持在旋转木马图像上的固定位置，而不是在浏览器窗口上。另外，我需要将字体字形更改为透明图像。
左键和右箭头在点击时滚动旋转木马。它们不是图像，它们是字形，我猜它是某种奇怪的字体。这是HTML：
<a href="#myCarousel" class="left carousel-control" data-slide="prev" style="width:0px"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a href="#myCarousel" class="right carousel-control" data-slide="next" style="width:0px"><span class="glyphicon glyphicon-chevron-right"></span></a>
这是href的css：
.carousel-control {
background: #343432;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
这是内跨的css：
.glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
和
.glyphicon {
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
虽然它没有在原始html中显示，但在查看Chrome开发工具栏检查器时，在跨度内部我看到了：
::before
所以我需要知道如何更改箭头位置以保持相对于轮播图像而不是浏览器窗口的固定。我需要将字形更改为我拥有的一些透明箭头。
以下是您要检查任何元素的实际网页： http://www.zerogravpro.com/temp/bootstrap/
感谢。
答案 0 :(得分：10)
我已在JSFIDDLE中复制了您的代码，以重新创建问题。
你有这样的结构：
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner"></div>
<a href="#myCarousel" class="left carousel-control"></a>
<a href="#myCarousel" class="right carousel-control"></a>
</div>
a标记是导航箭头，位于absolute与其容器#myCarousel相对的位置。内部跨度的实际位置使箭头远离边缘。
由于容器#myCarousel始终使用屏幕调整大小，因此箭头始终可见，并且可以达到此限制：
首先删除a标记的内联样式：
<a href="#myCarousel" class="left" ... /*style="width:0px" Remove this*/>
然后在CSS上添加：
.carousel-control {
top:50%;
width:auto;
height:1em;
background:transparent;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
position:static;
display:block;
width:auto;
}
.carousel-control .glyphicon-chevron-left:before {
margin-left:0;
}
现在你有 THIS RESULT
现在要将箭头更改为图像，您可以重置before伪元素的内容，而是将图像添加为背景，如下所示：
.carousel-control .glyphicon-chevron-right:before {
//Reset the icon
content: " ";
//Give layout
display:block;
//Your image as background
background:url('http://yourarrow.png') no-repeat;
//To show full image set the dimensions
width:30px;
height:30px;
}
现在您可以 THIS RESULT
答案 1 :(得分：2)
在这里你去汗水编码器。我重新创建了代码。我看到你多次使用class="container"。并且要使轮播正常工作，您必须在class="container内包含控件。我在自定义图片的控件中将<span>标记替换为<img>。
如果您有任何问题，请随时发表评论。
<强> HTML
<div class="container">
<div class="navbar-wrapper" style=";margin-top:0px">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/1.jpg">
</div>
<div class="item">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/2.jpg">
</div>
<div class="item">
<img src="http://www.zerogravpro.com/temp/bootstrap/images/3.jpg">
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<img class="chevron chevron-left" src="http://alexoliveira.me/Hawaii/images/chevron-left.png" />
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<img class="chevron chevron-right" src="http://alexoliveira.me/Hawaii/images/chevron-right.png" />
</a>
</div>
</div>
<强> CSS
.chevron {
width:30%;
position:absolute;
top:40%;
}
.container {
background-color:#343432;
}
.chevron-left {
left:5%;
}
.chevron-right {
right:5%;
}
body {
background-color:#343432
}
答案 2 :(得分：0)
试试这个
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"><img src="images/left_arrow.png" class="img-responsive"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"><img src="images/right_arrow.png" class="img-responsive"></span>
</a>
CSS
.glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
答案 3 :(得分：0)
如果将整个.carousel类包装在.container div中，它应该保留轮播控件与图像而不是网站本身。但是，我禁用了我的网站的响应能力，因此这可能不是您正在寻找的。
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner"></div>
<a href="#myCarousel" class="left carousel-control"></a>
<a href="#myCarousel" class="right carousel-control"></a>
</div>
</div>
答案 4 :(得分：0)
在修改bootstrap轮播的源代码方面，您可以在此链接http://www.landcoder.com/codes-change-style-carousel-bootstrap-367上查看很多内容。
我认为你的问题是问题：
.carousel-control {
background: #343432;
position: absolute;
top: 0; /* this might be your problem */
}
如果您想根据图像移动侧箭头，请将顶部更改为50％。
.carousel-control {
background: #343432;
position: absolute;
top: 50%;
}