堆栈内存溢出
  繁体   English   中英

引导程序无法与Visual Studio 2017一起正常使用

[英]bootstrap not working properly with visual studio 2017

 原文  2019-03-15 13:07:39  2   4    html/ css/ bootstrap-4/ visual-studio-2017

问题描述

我尝试在Visual Studio 2017中使用引导程序创建轮播。我使用NuGet包管理器安装了jquery和引导程序。 并检查其工作，我生成了一个旋转木马引导片段。

这是代码： 

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

上面代码的输出与预期的不同，因为所有图像幻灯片都一个放在另一个下面，而不是放在转盘上。

4 个解决方案

解决方案1
 3 已采纳  2019-03-15 13:19:54

为Bootstrap 4 Carousel使用正确的结构。

您正在使用的标记适用于3.x。 例如， .item现在是.carousel-item 。

解决方案2
 2  2019-03-15 13:19:50

我想你忘了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一定弄不懂路由。 检查您的文件结构，以确保这些文件确实存在，并确保正确链接到它们。 如果这样不起作用，您可以随时获取CDN或自己获取文件并进行路由。

解决方案4
 0  2019-03-15 13:25:33

不确定与Visual Studio有什么关系-但我可以看到您已将它们命名为item而不是较新的carousel-item我在下面的示例中包含了bootstrap CDN-因此您可能也需要检查文件结构，如果仍然无法使用。

他是您的榜样，正在与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.

相关问题 引导程序无法与Visual Studio一起正常使用 由Visual Studio 2013创建的Bootstrap模板无法正常工作 Angular 上的 html 文件中的引导类没有智能感知 - Visual Studio 2017 Visual Studio 2017 HTML 预览器 Visual Studio 2017 HTML标签选择器 带有 Visual Studio 2017 的 Vue 移动应用程序项目 在Visual Studio 2017中没有d3.js的智能感知 如何在 Visual Studio 2017 中禁用自动 ID Visual Studio 2017 Movierental 日期设置 引导程序-卡无法正常工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM