如果你注意到,指标是方形的,我希望它们是圆形的!到目前为止,我所遵循的所有教程似乎都是正确的;我从未见过其他人的方形指示器旋转木马.这是我的HTML:
<!-- Carousel start --><div ID="myCarousel" > <ol > <li data-target="#myCarousel" data-slIDe-to="0" ></li> <li data-target="#myCarousel" data-slIDe-to="1"></li> <li data-target="#myCarousel" data-slIDe-to="2"></li> </ol> <div > <div > <img src="bootstrap/img/home-page-banner.jpg"/> <div > <div > <h1>heading One</h1> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> <p><a >Sign up!</a></p> </div> </div> </div> <div > <img src="bootstrap/img/home-page-banner.jpg"/> <div > <div > <h1>heading One</h1> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> <p><a >Sign up!</a></p> </div> </div> </div> <div > <img src="bootstrap/img/home-page-banner.jpg"/> <div > <div > <h1>heading One</h1> <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> <p><a >Sign up!</a></p> </div> </div> </div> </div> <a href="#myCarousel" data-slIDe="prev"> <span ></span> </a> <a href="#myCarousel" data-slIDe="next"> <span ></span> </a></div><!-- Carousel end -->
你觉得我在这里怎么了?我是否应该使用旋转木马指示器< ol>我不知道呢?
P.s.:我已经尝试过.carousel-indicators {border-radius:100%;}没有成功.
解决方法 添加border-radius:.carousel-indicators > li { border-radius: 50%;}
请注意,您必须在carousel-indicators类中定位li标记,并且还要执行50%而不是100%.
因此,您不必使用!important来覆盖默认的border-radius:
#myCarousel-indicators > li { border-radius: 50%;}<ol ID="myCarousel-indicators" ></ol>总结
以上是内存溢出为你收集整理的html – Bootstrap轮播指示器是方形的;我想要他们全部内容,希望文章能够帮你解决html – Bootstrap轮播指示器是方形的;我想要他们所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)