我正在使用bootstrap 4，并且正在实现旋转木马。我有一个旋转木马幻灯片，接受表单中的电子邮件地址。但是，旋转木马似乎阻止了键盘的使用。在旋转木马内，我无法输入，只能用我的鼠标从自动填充电子邮件地址列表中选择。这是基础知识，如你所见，没有样式，你不能在表单字段中输入。谢谢。
更新以下是小提琴：https://jsfiddle.net/t81zadee/
UPDATE 这是删除hidden-xs-down的小提琴，因为最初我将旋转木马隐藏在小屏幕上。实际上，我不打算在小屏幕上使用它，因此布局可能没有最好的格式，但是对于调试，这里是小屏幕的小提琴：https://jsfiddle.net/t81zadee/9/
更新轮播设置为在胡佛上暂停，因此有足够的时间在字段中输入应该不是问题。只要你不离开面板，就不会一直滑动。我知道这不是最理想的布局，但我仍然需要弄明白。我只是不明白为什么旋转木马会阻止键盘的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide hidden-xs-down" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container-fluid">
<p>Slide irrelevant to question</p>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid p-a-0">
<p>Slide irrelevant to question</p>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid ">
<br><h1 class ="text-xs-center">Signup for our email list</h1><br>
<div class="row m-a-0">
<div class="col-xs-12 m-x-auto"><br>
<form>
<div class="col-sm-1"></div>
<div class="col-md-8 col-sm-7">
<label class="sr-only" for="email">e-mail address</label>
<input type="email" class="form-control" style="width:100%" id="email" placeholder="e-mail address">
</div>
<div class="col-md-2 col-sm-3">
<button type="submit" class="btn btn-Custom2" style="width:100%">Subscribe!</button>
</div>
<div class="col-sm-1"></div>
</form>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
代码段：
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<div id="carousel-example-generic" class="carousel slide hidden-xs-down" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container-fluid">
<p>Slide irrelevant to question</p>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid p-a-0">
<p>Slide irrelevant to question</p>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid ">
<br>
<h1 class="text-xs-center">Signup for our email list</h1>
<br>
<div class="row m-a-0">
<div class="col-xs-12 m-x-auto">
<br>
<form>
<div class="col-sm-1"></div>
<div class="col-md-8 col-sm-7">
<label class="sr-only" for="email">e-mail address</label>
<input type="email" class="form-control" style="width:100%" id="email" placeholder="e-mail address">
</div>
<div class="col-md-2 col-sm-3">
<button type="submit" class="btn btn-Custom2" style="width:100%">Subscribe!</button>
</div>
<div class="col-sm-1"></div>
</form>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
答案 0 :(得分：0)
感谢Mathew Jibin，将数据键盘=“false”添加到旋转木马中的旋转木马div允许表单字段中。