css - 自定义 Bootstrap 轮播的宽度

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 个选项可以将轮播的宽度设置为

1. 设置容器宽度并在该容器中包含轮播，此宽度可以自定义为

   .container {
       width : // here enter your custom width
   }
   

在默认 Bootstrap css/less 上覆盖它。不要忘记添加媒体查询来调整宽度，因为这将在全局范围内应用。

1. 其次，您可以使用类更改轮播元素的内部宽度，如下所示

   .carousel-inner {
       width: // here enter your custom width;
   }
   

这只会影响轮播的宽度