html - 如何将 Bootstrap 轮播保存在容器中？

Question

我似乎在使用 Bootstrap 轮播时遇到困难，它似乎在容器/行之外“中断”。我不是 100% 确定我可能需要提供什么样的信息(第一次在这里发帖寻求帮助)但这里是一个屏幕截图，后面是代码(只是一个典型的 Bootstrap 轮播调整大小)

错误截图

.project01-carousel {
 width:640px;
 height:360px;
 }

  <div class="col-sm-4">
  <section class="project01-carousel halfheight">
   <section class="project-carousel-wrap halfheight">

<!-- Carousel -->
<div class="project-carousel owl-carousel owl-nav-sticky-wide">

  <div class="project-carousel-item project-01-carousel-item-01 halfheight 
  text-center">
  <img src="admin/uploaded_image/terrain_renders/<?php echo $row['render1']; 
   ?>">
  </div>
  <div class="project-carousel-item project-01-carousel-item-02 halfheight 
  text-center">
  <img src="admin/uploaded_image/terrain_renders/<?php echo $row['render2']; 
   ?>">
  </div>
  <div class="project-carousel-item project-01-carousel-item-03 halfheight 
  text-center">
  <img src="admin/uploaded_image/terrain_renders/<?php echo $row['render3']; 
   ?>">
  </div>
  <div class="project-carousel-item project-01-carousel-item-04 halfheight 
   text-center">
  <img src="admin/uploaded_image/terrain_renders/<?php echo $row['render4']; 
   ?>">
  </div>
  </div>

  </section>
  </section>
  </div>

Answer 1

确保你的内容没有静态宽度，我注意到你在 Bootstrap 中使用 Owl Carousel，所以确保你没有在那里复制任何类/有 Bootstrap carousel样式和 js 已关闭，因此没有冲突。

请注意，我只使用 !important 来克服覆盖我 100% 宽度调用的 img 样式。您不必在代码中使用 !important 标记。

.project01-carousel {
 /*width:640px;*/
 width: 100%;
max-width: none;
 height:auto;
 border: 1px solid red;
 }
 
 img {
 width: 100% !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4">
  <section class="project01-carousel halfheight">
    <section class="project-carousel-wrap halfheight">
      <!-- Carousel -->
      <div class="project-carousel owl-carousel owl-nav-sticky-wide">
        <div class="project-carousel-item project-01-carousel-item-01 halfheight
          text-center">
          <img src="http://placehold.it/500x500">
        </div>
        <div class="project-carousel-item project-01-carousel-item-02 halfheight
          text-center">
          <img src="http://placehold.it/500x500">
        </div>
        <div class="project-carousel-item project-01-carousel-item-03 halfheight
          text-center">
          <img src="http://placehold.it/500x500">
        </div>
        <div class="project-carousel-item project-01-carousel-item-04 halfheight
          text-center">
          <img src="http://placehold.it/500x500">
        </div>
      </div>
    </section>
  </section>
</div>