个人中心
gpt4 book ai didi

javascript - 导航栏下的 Bootstrap 轮播

转载 作者：行者123 更新时间：2023-11-29 18:04:22 29 4
gpt4 key购买 nike

所以我工作的这个网站必须有背景(客户想要它，我讨厌它..)我已经将导航栏设为透明，以便背景图像显示在它后面。现在我想添加一个位于导航栏下方且无论如何都不重叠的旋转木马。我仍然需要导航栏后面的图像背景图像这是我目前所拥有的:

/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
 */

/* Global Styles
============================================================ */
html { 
  background: url(../img/GreyWeavePaper-Portrait.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #000;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Oswald', 'Open Sans', sans-serif;
    color: #000;
}

p {
    font-family: 'Open Sans', sans-serif;
    color: #000;
}

/* Global Navbar Formatting
==============================================================*/

.navbar {
    padding-bottom: 10px;
}

.navbar ul {
    margin-top: 20px;
}

.navbar.transparent.navbar-default {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

/* Global Footer Formatting
==============================================================*/
/* Home Page Formatting
==============================================================*/
/*Full Width Slider Formatting */
/* Carousel base class */
.carousel {
    padding-top: 100px;
    height: 100%;
}
/* 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: 500px;
  background-color:#bbb;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

/* Menu's Page Formatting
==============================================================*/
/* E-Club Page Formatting
==============================================================*/
/* Events Page Formatting
==============================================================*/
/* Contact Page Formatting
==============================================================*/
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Meta charset 
===================================================================================-->
        <meta charset="utf-8">
        
<!-- Title  
===================================================================================-->
        <title>Bocaditio | South Amercian Dishes</title>
        
<!-- Meta Tags  
===================================================================================-->
        <meta name="author" content="Thomas Withers @ Ice7Media">
        <meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- CSS Stylesheets  
===================================================================================-->
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link href = "css/Custom.css" rel = "stylesheet">
        <link href = "css/Mapstyle.css" rel = "stylesheet">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="shortcut icon" href="img/iceBox.png">
        
<!-- Custom Fonts 
===================================================================================-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    </head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation
===================================================================================-->
	<div class = "navbar transparent navbar-default navbar-fixed-top">
		<div class = "container">
			<a href = "index" class = "navbar-brand">
            <img src="img/BocaditoLogo.png">
            </a>
			<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
			</button>
            
			<div class = "collapse navbar-collapse navHeaderCollapse">
                
				<ul class = "nav navbar-nav navbar-right">
                    <li><a href = "index.html">Home</a></li>
                    <li><a href = "about.html">Menus</a></li>
                    <li><a href = "e-clubs.html">E-Clubs</a></li>
                    <li><a href = "contact.php">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>
<!-- Full screen Slider    
===================================================================================--> 
    <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>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="/assets/example/bg_suburb.jpg" class="fill">
          <div class="container">
            <div class="carousel-caption">
              <h1>Bootstrap 3 Carousel Layout</h1>
              <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/1500/600/abstract/1">
          <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>
    <!-- /.carousel -->
<!-- Abouts Us & Logo
===================================================================================--> 
<!-- Top Dishes
===================================================================================-->
<!-- footer
===================================================================================-->
<!-- Scripts
===================================================================================-->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC22aNgIjcYzx5Oel1m0Jtcem-W4R895fQ"></script>
    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
    <script src="js/main.js"></script>
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>
</body>

</html>

如您所见，我没有达到预期的效果，我们将不胜感激!

最佳答案

只需添加一个 margin-top 到你的 body 相当于你的导航栏高度，如下所示:

body {
    margin-top: 50px;
}

N.B. 将 50px 替换为导航栏的高度。

关于javascript - 导航栏下的 Bootstrap 轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32455140/

29 4 0
文章推荐： javascript - 显示一些错误 Uncaught ReferenceError :
文章推荐： android - 从选定的 CursorLoader 获取字段
文章推荐： MySql 无法将一个表中的值添加到另一个表中
文章推荐： javascript - Bootstrap 日期时间选择器 : can't select "tomorrow" as date