Question

我将此特定代码放入codepen中，它显示正确并且看起来很棒，但是当我导出文件并通过本地Chrome浏览器打开它时，它无法正常工作。静态标题一直显示在转盘下方而不是在转盘中，这是我正在使用的代码。

＆＃13;

.main-text {
  position: absolute;
  top: 50px;
  width: 96.66666666666666%;
  color: #FFF;
}
.btn-min-block {
  min-width: 170px;
  line-height: 26px;
}
.btn-clear {
  color: #FFF;
  background-color: transparent;
  border-color: #FFF;
  margin-right: 15px;
}
.btn-clear:hover {
  color: #000;
  background-color: #FFF;
}
.carousel-caption {
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Depot Sqaure</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/class" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">


</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="carousel-example-generic" class="carousel slide" 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">
            <div class="item active">
              <img src="images/mainimg01.png" alt="First slide">
              <div class="carousel-caption">
                <h3>
                                Your elegant and affordable destination</h3>
                <p>
                  for family, business, and community events.</p>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
              <div class="carousel-caption">
                <h3>
                                Second slide</h3>
                <p>
                  Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
              <div class="carousel-caption">
                <h3>
                                Third slide</h3>
                <p>
                  Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </div>
            </div>
          </div>
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
        </div>
        <div class="main-text hidden-xs">
          <div class="col-md-12 text-center">
            <h1>
                        Static Headline And Content</h1>
            <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </h3>
            <div class="">
              <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">MORE ABOUT US</a><a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">CHECK AVAILABILITY</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="push">
  </div>


</body>

</html>

＆＃13;

我的HTML代码适用于codepen，但不适用于chrome浏览器

0 个答案: