如何将Bootstrap轮播保存在容器内？

Question

我似乎在使用自举旋转木马时遇到困难，似乎在容器/排外面“打破”。我不是100％确定我可能需要提供什么样的信息（第一次在这里发帖寻求帮助）但是这里是一个截图，后面是代码（只是一个典型的bootstrap carousel调整大小）

错误的屏幕截图

.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关闭，所以没有冲突。

请注意，我只使用了！重要的是克服了一个img风格，它覆盖了我的100％宽度调用。您不应该在代码中使用！important标记。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，你应该把你的

包起来

<div class="col-sm-4">

连续并将行包装在像这样的容器中

<div class="container-fluid">
<div class="row">
<div class="col-sm-4">

你也应该删除

的宽度

roject01-carousel