html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon

html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon,第1张

概述我使用默认箭头(glyphicon-chevron-left和glyphicon-chevron-right)创建了一个Twitter Bootstrap轮播.这些很好地在旋转木马中垂直居中. 我想用两个不同的图标替换这些图标,即glyphicon-circle-arrow-left和glyphicon-circle-arrow-right.但由于某种原因,当只更换图标时,它们突然不再垂直居中.我 我使用默认箭头(glyphicon-chevron-left和glyphicon-chevron-right)创建了一个Twitter bootstrap轮播.这些很好地在旋转木马中垂直居中.

我想用两个不同的图标替换这些图标,即glyphicon-circle-arrow-left和glyphicon-circle-arrow-right.但由于某种原因,当只更换图标时,它们突然不再垂直居中.我找不到原因.

这是一个很好的中心版本(http://jsfiddle.net/AdF6b):

<div >      <div  ID="foto-carousel" >        <ol >          <li data-target="#foto-carousel" data-slIDe-to="0" ></li>          <li data-target="#foto-carousel" data-slIDe-to="1"></li>          <li data-target="#foto-carousel" data-slIDe-to="2"></li>        </ol>        <!-- Carousel items -->        <div >          <div >            <img src="http://lorempixel.com/g/1600/800/city/1">            <div >              <h4>SlIDe 1</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit...</p>            </div>          </div>          <div >            <img src="http://lorempixel.com/g/1600/800/city/3">            <div >              <h4>SlIDe 2</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>          <div >            <img src="http://lorempixel.com/g/1600/800/city/5">            <div >              <h4>SlIDe 3</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>        </div>        <a  href="#foto-carousel" data-slIDe="prev">          <span ></span> -->        </a>        <a  href="#foto-carousel" data-slIDe="next">          <span ></span>        </a>      </div>

非中心版(http://jsfiddle.net/AdF6b/1/):

<div >      <div  ID="foto-carousel" >        <ol >          <li data-target="#foto-carousel" data-slIDe-to="0" ></li>          <li data-target="#foto-carousel" data-slIDe-to="1"></li>          <li data-target="#foto-carousel" data-slIDe-to="2"></li>        </ol>        <!-- Carousel items -->        <div >          <div >            <img src="http://lorempixel.com/g/1600/800/city/1">            <div >              <h4>SlIDe 1</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>        </div>        <a  href="#foto-carousel" data-slIDe="prev">          <span ></span>        </a>        <a  href="#foto-carousel" data-slIDe="next">          <span ></span>        </a>      </div>

为什么第二个版本中的箭头不居中?唯一的区别是glyphicon类.

解决方法 我不得不承认,这个问题有点奇怪.在Twitter bootstrap中,有以下特定行:

.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.glyphicon-circle-arrow-left {    display: inline-block;    position: absolute;    top: 50%;    z-index: 5;}

就像你看到的那样,没有指定.glyphicon-circle-arrow-left,也没有指定.glyphicon-circle-arrow-right类.所以你可以简单地添加它,一切都应该工作正常:

.carousel-control .icon-prev,.glyphicon-circle-arrow-left,.carousel-control .glyphicon-circle-arrow-left,.carousel-control .glyphicon-circle-arrow-right {    display: inline-block;    position: absolute;    top: 50%;    z-index: 5;}
总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon全部内容,希望文章能够帮你解决html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1052292.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存