ResponsiveSlides.js与Bootstrap 3

时间:2016-04-19 16:34:36

标签: html css twitter-bootstrap responsive-slides

我试图将ResponsiveSlides滑块置于引导列中,但无法使其工作。我有很大的图像,所以我把它们的大小调整为80%。当它为100%时,它们适合整个屏幕,但现在它们与左侧对齐。有人可以帮帮忙吗?谢谢!

<div class="col-xs-12">    
<ul class="rslides">
<li><a href="#"><img src="..." alt=""></a></li>
<li><a href="#"><img src="..." alt=""></a></li>
</ul>
</div>

的CSS:

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 80%;
  border: 0;
  }

1 个答案:

答案 0 :(得分:0)

我认为将UL的宽度设置为80%并将img设置为100%

应该更好
always

如果你想在不更换容器的情况下居中IMG,你必须删除浮动:左;和相同的保证金:0自动;

.rslides {
    width: 80%;
    margin: 0 auto;
}