Question

我正在开发一个带有bootstrap的旋转木马，目的是显示5张图像，每次滑动时，它都会增加1。

我目前实际遇到的问题是元素没有对齐但是它们

Here您可以找到完整的代码

有人知道如何解决问题并将所有元素放在同一行吗？提前感谢您的回复！

Answer 1

我认为您需要删除此边距：

<div class="col-xs-2" style="margin-right: 15%">

所以，它只是：

<div class="col-xs-2">

当bootstrap添加你自己的覆盖边缘时？

Answer 2

核心答案是在列之前添加<div class="row">。看看CSS，你就会明白为什么：

.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2,.col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;

}

这是默认的Boostrap css尝试制作你的代码。

此外，.item容器应在单张幻灯片中包含所需的元素。如果您想要幻灯片中的3张图片，则应将它们放在一个.item容器中

Bootstrap轮播不会在同一行显示图像

2 个答案: