【问题标题】:why is my carousel margined to right为什么我的旋转木马边缘向右
【发布时间】:2017-12-19 04:34:48
【问题描述】:

我在我的网站上使用轮播,它与行不对齐,而是像右边 40px 一样边距

我尝试过使用 margin:0, margin-left:0,但没有任何效果。

而且每次它滚动浏览下一个图像时,它都会由于某种原因被扔出一行。

有什么帮助吗?

我的 html 代码

<div class="container">
<div class="row">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <ul class="thumbnails">
                    <li class="col-md-4">
                        <div class="fff">
                            <div class="thumbnail">
                                <a href="#"><img src="random img" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>random caption</h4>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

我的 CSS 代码

img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
@media (max-width: 767px) {
.page-header, .control-box {
    text-align: center;
}
}

@media (max-width: 479px) {
.caption {
    word-break: break-all;
}
}

【问题讨论】:

  • 你能制作一个real sn-p,这样我们就可以运行它,看看发生了什么?或者你有一个公开的例子吗?
  • 尝试删除 li 上的 .col-md-4

标签: html css carousel bootstrap-4


【解决方案1】:

添加此 CSS 规则:

ul.thumbnails {
  padding:0;
}

希望这会有所帮助...

【讨论】:

    【解决方案2】:

    使用:

    body {
      margin:0;
    }
    
    .thumbnails {
      padding: 0;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-05-31
      • 2020-12-01
      • 1970-01-01
      • 1970-01-01
      • 2022-12-20
      • 2021-01-27
      • 2012-12-24
      • 1970-01-01
      相关资源
      最近更新 更多