小贝子编程

我的引导轮播不起作用，按钮不显示



我已经尝试了我在这些论坛中可以找到的每个解决方案，而在youtube中发现的一些解决方案无济于事。请记住，我是一个新手，这是我的第一个引导程序项目，也是我第一次在这里发布。我基本上复制了示例项目中的所有代码，所以我不知道我在做什么错。我在计算机上安装了引导程序，下载并安装了字体，这是我能想到的。我在这里失去理智。基本上我有三个问题：我的旋转木马根本不起作用，箭头没有出现，并且页面永远需要加载。这是我的代码。预先感谢您的帮助。

/* NAVBAR
-------------------------------------------------- */
.navbar {
  margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
  height: 240px;
  margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 240px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 240px;
}
@media (min-width: 768px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}
/* MARKETING
-------------------------------------------------- */
.marketing {
  margin: 60px auto;
}
.marketing .col-md-4 {
  text-align: center;
  font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
  font-size: 60px;
  background-color: #EAEAEA;
  border-radius: 50%;
  padding: 40px;
  color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 160px;
}
.footer,
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background: #444;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
</head>
<body>
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My name</a>
    </div>
    <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
    </div>
    <div class="carousel-inner" role="listbox">
      <div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
    </div>
 
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

第8行是不必要的，您已经有Bootstrap 3.3.7

您应该只有一个旋转木马班 

<div class="carousel-inner" role="listbox">
<div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
  
<div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
</div>
<div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
</div>

这是更正的文件

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0">
  <!-- Latest compiled and minified Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
      </button>
          <a class="navbar-brand" href="#">My name</a>
        </div>
        <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#portfolio-carousel" data-slide-to="1"></li>
        <li data-target="#portfolio-carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container">
            <div class="carousel-caption">
              <h1>Who I am</h1>
              <p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>What I do</h1>
              <p>I am a front-end developer who loves writing code that works well in different environments.</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>What I've done</h1>
              <p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
    </div>
  <!--latest jQuery 3-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!--Bootstrap JS-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

您非常接近。;(您将许多不必要的Div定义为两个身体Div的Div，并与Carousel Inner的许多Div"定义。另外，您的版本中有两个封闭式标签。您的控件不需要在您的轮播。还有正确的箭头的CSS类也是错误的。只需将它们与左箭头的那些比较。

/* NAVBAR
-------------------------------------------------- */
.navbar {
  margin-bottom: 0;
}
/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
  height: 240px;
  margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 240px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 240px;
}
@media (min-width: 768px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}
/* MARKETING
-------------------------------------------------- */
.marketing {
  margin: 60px auto;
}
.marketing .col-md-4 {
  text-align: center;
  font-size: 16px;
}
.marketing .col-md-4 .glyphicon {
  font-size: 60px;
  background-color: #EAEAEA;
  border-radius: 50%;
  padding: 40px;
  color: #444;
}
/* STICKY FOOTER
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 160px;
}
.footer,
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background: #444;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 40px 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
</head>
<body>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
    </div>
      <div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
 
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium