Question

如何通过bootstrap或css自定义轮播的宽度？

我目前主要在我的网页上使用此代码：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

我试图为身体设置一个宽度，但它不起作用。

提前致谢！

Answer 1

您有2个选项可将轮播宽度设置为

设置容器宽度并在该容器中包含轮播，此宽度可以自定义为
```
.container {
    width : // here enter your custom width
}
```

覆盖默认bootstrap css / less。并且不要忘记添加媒体查询以调整宽度，因为这将全局应用。

其次你可以用下面的类来改变轮播项目的内部宽度
```
.carousel-inner {
    width: // here enter your custom width;
}
```

这只会影响轮播的宽度

Answer 2

宽度是相对于轮播所在的父容器。所以你需要在你要包裹轮播的div的ID /类上设置宽度。您也可以在引导容器中设置它（并全局更改容器宽度）或在列内部设置它以获得更宽松的特异性。

自定义Bootstrap轮播的宽度

2 个答案: