Свойства слайдера изображения не соответствуют при загрузке на хост - PullRequest
Новая
       13

Свойства слайдера изображения не соответствуют при загрузке на хост

0 голосов
/ 07 апреля 2019

У меня есть flex-box и слайдер изображений. Взял свойства width и margin, которые у меня были для flex-box, и переименовал класс карусели, который я получил от начальной загрузки, вставил значения, надеясь, что он будет выглядеть одинаково или похоже.

Когда я загрузил таблицу стилей и 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; }
}

И вот как я применяю те же настройки, что и на flex-box для слайдера. 

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