Question

我有一个弹性盒和一个图像滑块。运用了弹性盒的width和margin属性，并放入了从引导程序中获得的轮播的重命名类，粘贴了值，希望它看起来相同或相似。

当我将具有这些更改的样式表和html文档上载到服务器时，图像滑块仍然与以前相同。

当未应用这些设置时，图像滑块会调整大小以适合整个屏幕，这不是我想要的。

链接到网站：https://thugowns.tk 代码如下所示：

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner">

          <div class="carousel-item active">
            <img class="d-block w-100" src="./slide-1.png" alt="First slide">
            <div class="carousel-caption">
                <h5>Catch me on Twitch!! <a href="https://twitch.tv/warpig3" target="_blank">LIVE</a></h5>
            </div>
          </div>

          <div class="carousel-item">
            <img class="d-block w-100" src="./slide-2.png" alt="Second slide">
            <div class="carousel-caption">
                <h5>My Online Experience and why I stayed <a href="#" >here</a></h5>
            </div>
          </div>

          <div class="carousel-item">
            <img class="d-block w-100" src="./slide-3.png" alt="Third slide">
            <div class="carousel-caption">
                <h5>Special Announcements</h5>
            </div>
          </div>

        </div>

        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

这些是flex.box的属性。

.wrapper {
    padding: 5px;
    max-width: 960px;
    width: 95%;
    margin: 20px auto;
}

.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}

.column {
    flex: 1;
    margin: 2px;
    padding: 10px;
    text-align: center;
    &:first-child { margin-left: 0; }
    &:last-child { margin-right: 0; }
}

这就是我将在弹性框上应用与滑块相同的设置的方法。

.carousel-inner {
    max-width: 960px;
    width: 100%;
    margin: 20px auto;
}

上传到主机时，Image Slider属性不对应

0 个答案: