Question

我有一个带导航栏的标题和一个使用bootstrap的Carousel滑动图像如何在滚动时将这两个固定在一起当用户滚动网站以查看信息时，导航栏和轮播仍然固定在顶部，信息滚动在标题下

resultsAsString = new String[objects.size()];

Answer 1

如果我明白了，我会给你一个你可以找到幸福的链接。

http://www.w3schools.com/howto/howto_css_parallax.asp

希望帮助你：）

Answer 2

我添加了完整的代码供您作为资源引用您的文档，因为您发布的是没有输入的库存引导程序模板。仔细检查并确保安装了最新的引导程序并正确链接文件。下面我使用了CDN，但最好下载它。

确保您拥有固定标题导航的主要内容是以下代码：

<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">

您可以在下面的代码中找到上述代码。如果您有任何问题，请告诉我。

<!DOCTYPE html>
<html>

<head>
  <title>Whatever</title>
  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar-wrapper">
  <div class="container">
    <div class="navbar navbar-inverse navbar-fixed-top">

      <div class="navbar-header">
        <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="navbar-brand" href="#">Bootstrap 3</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="http://www.bootply.com" target="ext">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a>
              </li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </div>
  <!-- /container -->
</div>
<!-- /navbar wrapper -->


<!-- Carousel -->
<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>

    <div class="carousel-inner">
      <div class="item active">
        <img src="/root/directory/file_path.jpg" class="fill">
        <div class="container">
          <div class="carousel-caption">
            <h1>Bootstrap 3 Carousel Layout</h1>
            <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small="">
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
              </p>
            </pthis>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="/root/directory/file_path.jpg" class="fill">
        <div class="container">
          <div class="carousel-caption">
            <h1>Changes to the Grid</h1>
            <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
            <p><a class="btn btn-large btn-primary" href="#">Learn more</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
</div>
</body>
</html>

如何修复bootstrap中的导航栏和Carousel图像滑块

2 个答案: