Question

我有一个工作的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开发者工具整个区域，当点击时，旋转木马＆＃34;滑动＆＃34;。（当我在chrome dev上选择工具时，会出现以下区域）

正如您所看到的，他可以点击的区域远远大于V形/箭头本身。这就是问题所在。

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

Answer 1

你应该用：

覆盖Bootstrap

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

codepen

请注意它是一个非常大的区域，原因是：用户可以更轻松地点击并与旋转木马进行交互，即使是在移动设备上，也可以使用不同高度和宽度的图像（不确定BS管理这个但是它发生在野生）。这可能不是你想要的，但它现在给了很多用户：它们希望能够远离雪佛龙点击并仍然看到他们期望发生的行动。

此外，UX SE还有关于carousels ^^

的话要说

Answer 2

您可以添加css

.carousel-control {
   width: 25px;
}

也许您还必须添加保证金并删除背景？

.carousel-control {
    width: 25px;
    background: none;
    margin: 0 5%;
}

Answer 3

不确定这是否有效，但您可以尝试

删除data-slide =＆＃34; prev＆＃34;在a标签中并将其添加到span标签

中

减少Bootstrap旋转木马雪佛龙（Bootstrap 3）的面积

3 个答案: