html - 减小Bootstrap轮播V型人字形框的面积(Bootstrap 3)

我有一个正在使用的Bootstrap 4传送带，并且在一些图像中。

问题是用户不仅可以在人字形上滑动转盘，还可以在很大的区域（排序或矩形）上滑动。如何防止这种情况发生，以便用户在人字形之外单击时不会滑动？

<div id="list-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="item active">
              <!-- responsive image -->
              <img src="http://placehold.it/350x150">
            <div class="carousel-caption">
              lorem ipsum
            </div>
          </div>
          <div class="item ">
              <img src="http://placehold.it/450x200">
            <div class="carousel-caption">
                Hotel room in LA
            </div>
          </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#list-carousel" role="button" data-slide="prev">
        <i class="fa chevron fa-chevron-left "></i>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carou[![enter image description here][1]][1]sel-control" href="#prize-list-carousel" role="button" data-slide="next">
        <i class="fa chevron fa-chevron-right "></i>
        <span class="sr-only">Next</span>
      </a>
    </div>

这是通过Chrome Developer工具在整个区域中的区域，单击这些区域可使旋转木马“滑动”。 （当我在chrome开发工具上选择该行时，将显示以下区域）



如您所见，他可以单击的区域比人字形/箭头本身要大得多。这就是问题。

为确保它不是来自我的应用程序中的特定调整，我在这里也检查了在线BS轮播：http://codepen.io/SitePoint/pen/pjJGQE，它是相同的。

最佳答案

您应该使用以下命令覆盖Bootstrap：

.carousel-control {
  top: 20%;
  bottom: 20%;
}

codepen

请注意，这是一个很大的区域，这是有原因的：即使在移动设备上或具有不同高度和宽度的图像上，用户也可以更轻松地单击并与旋转木马进行交互（不确定BS是否管理此操作，但它确实发生在野外）。那可能不是您想要的，但现在已为许多用户所接受：他们希望能够从人字形上非常远地单击并仍然看到他们期望的动作。

UX SE也有关于carousels ^^的内容

关于html - 减小Bootstrap轮播V型人字形框的面积(Bootstrap 3)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41593269/