html - 带有Bootstrap 3的ResponsiveSlides.js

我正在尝试将ResponsiveSlides滑块居中放在引导列中，但无法使其正常工作。我的图片很大，因此我将其在CSS中的尺寸调整为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;
  }

最佳答案

我认为最好将UL的宽度设置为80％，将img设置为100％

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

如果要在不更改容器的情况下使IMG居中，则必须删除float：left;。和相同的保证金：0自动；

.rslides img {
    display: block;
    height: auto;
    float: left;  <-- remove this
    width: 80%;
    border: 0;
    margin: 0 auto; <-- add
}

关于html - 带有Bootstrap 3的ResponsiveSlides.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36724349/