引导程序无法与Visual Studio 2017一起正常使用
[英]bootstrap not working properly with visual studio 2017
问题描述
I am try to create a carousel using bootstrap in visual studio 2017. I installed jquery and bootstrap using NuGet package manager. 
我尝试在Visual Studio 2017中使用引导程序创建轮播。我使用NuGet包管理器安装了jquery和引导程序。 And to check its working, i generated a bootstrap snippet for carousel. 并检查其工作，我生成了一个旋转木马引导片段。
Here's the code: 这是代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div id="my-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#my-carousel" data-slide-to="0" class="active"></li> <li data-target="#my-carousel" data-slide-to="1"></li> <li data-target="#my-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> </div> <div class="item"> <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> </div> <div class="item"> <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <script src="Scripts/jquery-3.3.1.min.js"></script> <script src="Scripts/bootstrap.min.js"></script> </body> </html>
The output of the above code is not as expected, as all image slides are placed one below the other and not as a carousel. 上面代码的输出与预期的不同，因为所有图像幻灯片都一个放在另一个下面，而不是放在转盘上。
4 个解决方案
解决方案1
3 已采纳 2019-03-15 13:19:54
Use the correct structure for the Bootstrap 4 Carousel . 为Bootstrap 4 Carousel使用正确的结构。
The markup you're using is for 3.x. 您正在使用的标记适用于3.x。 For example .item is now .carousel-item . 例如， .item现在是.carousel-item 。
解决方案2
2 2019-03-15 13:19:50
I think you forgot proper.js 我想你忘了property.js
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="row"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=First+slide" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=Second+slide" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://placehold.it/1200x675&text=Third+slide" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script></script> </body> </html>
解决方案3
0 2019-03-15 13:19:41
Visual studio must have gotten messed up with routing. Visual Studio一定弄不懂路由。 Check your file structure to be sure those files are really there and make sure you are linking to them properly. 检查您的文件结构，以确保这些文件确实存在，并确保正确链接到它们。 If that doesn't work you could always get the cdn or get the files yourself and route them. 如果这样不起作用，您可以随时获取CDN或自己获取文件并进行路由。
解决方案4
0 2019-03-15 13:25:33
Not sure it's anything to do with Visual Studio - but I can see that you've named them item instead of the newer carousel-item I've included the bootstrap CDN in my example below - so you may need to check your file structure too, if it's still not working for you. 不确定与Visual Studio有什么关系-但我可以看到您已将它们命名为item而不是较新的carousel-item我在下面的示例中包含了bootstrap CDN-因此您可能也需要检查文件结构，如果仍然无法使用。
He's your example, working but with the carousel-item class. 他是您的榜样，正在与carousel-item一起工作。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row"> <div id="my-carousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#my-carousel" data-slide-to="0" class="active"></li> <li data-target="#my-carousel" data-slide-to="1"></li> <li data-target="#my-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img alt="First slide" src="http://placehold.it/1200x675&text=First+slide"> </div> <div class="carousel-item"> <img alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide"> </div> <div class="carousel-item"> <img alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.