Установка ширины карусели с помощью HTML - PullRequest
Новая
       12

Установка ширины карусели с помощью HTML

0 голосов
/ 29 октября 2019

Я попытался уменьшить ширину моей карусели, чтобы она не занимала всю ширину страницы, но, похоже, она не работает. Я хотел бы, чтобы ширина охватывала только 8 столбцов и была бы центрирована. Я попытался изменить код CSS, чтобы ширина составляла 50%, а не 100%, но это не сработало. 

.item {
  height: 300px;
}

.item,
img {
  height: 500px !important;
  width: 100% !important;
}

.item h3 {
  font-family: 'Anton', sans-serif;
  font-size: 48px;
  color: cornsilk;
}

.item p {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: cornsilk;
}
<!--Start of carousel-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
    <li data-target="#carousel-example-generic" data-slide-to="1"> </li>
    <li data-target="#carousel-example-generic" data-slide-to="2"> </li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/c1.jpg" alt="First slide" />

      <div class="carousel-caption">
        <h3>Welcome to my amazing website</h3>
        <p3>Hope you enjoy!</p3>

      </div>
    </div>
    <div class="item">
      <img src="images/c2.jpg" alt="Second slide" />
    </div>
    <div class="item">
      <img src="images/c3.jpg" alt="Third slide" />
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

1 Ответ

0 голосов
/ 29 октября 2019

Почему бы вам не поработать с верхним уровнем, т. Е. С внешним элементом div (id="carousel-example-generic" class="carousel slide")?

Например: 

.carousel{
  width: 50%;
  margin: 0 auto;
}

С помощью начальной загрузки вы также можете использовать начальную загрузку-сетка с учетом смещений: https://getbootstrap.com/docs/4.0/layout/grid/

...