Bootstrap轮播在以前的按钮中没有对齐

时间：2017-01-23 05:29:54

标签： html twitter-bootstrap

在研究引导程序到导航栏菜单和轮播时，我遇到了这个问题，我尝试了一些改变一些代码的东西，但它不起作用。向我解释发生了什么，哪一个是错误。你可以运行片段来查看我的轮播发生了什么

 $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});



    $('#myCarousel').carousel();
    var winWidth = $(window).innerWidth();
    $(window).resize(function () {

        if ($(window).innerWidth() < winWidth) {
            $('.carousel-inner>.item>img').css({
                'min-width': winWidth, 'width': winWidth
            });
        }
        else {
            winWidth = $(window).innerWidth();
            $('.carousel-inner>.item>img').css({
                'min-width': '', 'width': ''
            });
        }
    });
  body {
      background: #97744a;
  }


section
{
  background:yellow;
}
.banner
{
  background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
  min-height:200px;
}
.banner .row
{
  text-align:center;
  margin-top:50px;
}
.banner h1
{
  color:white;
}

.opaque-navbar {
    background-color: rgba(0,0,0,0.5);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}

.opaque-navbar.opaque {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

ul.dropdown-menu {
    background-color: black;
}


@media (max-width: 992px) {
  body
  {
    background: ;
  }
  .opaque-navbar {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

}

.navbar-brand img {
  width: 190px;
  height: auto;
  margin-top: -12px;
}

.active a {
    background-color: #eeab1f !important;
}

/* main page */

.jumbotron {
  border-top: 5px solid #cb8f50;
  border-bottom: 5px solid #754b24;
  border-right: 0px;
  border-left: 0px;
  min-height: 200px;
  background-color: #422a1e;
}

.jumbotron img {
  width: 500px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.jumbotron h2, h3 {
  margin-top: -5px;
  font-weight: bold;
  color: #eeab1f;
}

.jumbotron p {
  font-weight: lighter;
  color: #ffffff;
  font-size: 15px;
}

.jumbotron img {
  width: 450px;
  height: auto;
}

.right {
  margin-top: 40px;
}

.right img{
  width: 25px;
}


    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        display: block;
        height: 400px;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        line-height: 1;
        margin: 0 auto;
    }
 <!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/jquery.min1.js"></script>
  <script src="js/javascript-redirect.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
	
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
  <span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
    
  </button>
      <a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#"></a></li> 
      </ul>
    </div>
  </div>
</div>



	<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item" style="">
            <img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">First Slide Title</h4>
                <p class="">
                   Description for First Slide, this First Slide.
                </p>
            </div>
        </div>
        <div class="item active">
            <img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Second Slide Title</h4>

                <p class="">
                   Description for Second Slide, this is Second Slide.
                </p>
            </div>
        </div>
        <div class="item" style="">
            <img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>
    </div>    

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
 $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});



    $('#myCarousel').carousel();
    var winWidth = $(window).innerWidth();
    $(window).resize(function () {

        if ($(window).innerWidth() < winWidth) {
            $('.carousel-inner>.item>img').css({
                'min-width': winWidth, 'width': winWidth
            });
        }
        else {
            winWidth = $(window).innerWidth();
            $('.carousel-inner>.item>img').css({
                'min-width': '', 'width': ''
            });
        }
    });
＆＃13; 
  body {
      background: #97744a;
  }


section
{
  background:yellow;
}
.banner
{
  background: url(https://jonesbrotherscoffee.com/img/grindedcoffee300.jpg) fixed;
  min-height:200px;
}
.banner .row
{
  text-align:center;
  margin-top:50px;
}
.banner h1
{
  color:white;
}

.opaque-navbar {
    background-color: rgba(0,0,0,0.5);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
    height: 60px;
    border-bottom: 0px;
    transition: background-color .5s ease 0s;
}

.opaque-navbar.opaque {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

ul.dropdown-menu {
    background-color: black;
}


@media (max-width: 992px) {
  body
  {
    background: ;
  }
  .opaque-navbar {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

}

.navbar-brand img {
  width: 190px;
  height: auto;
  margin-top: -12px;
}

.active a {
    background-color: #eeab1f !important;
}

/* main page */

.jumbotron {
  border-top: 5px solid #cb8f50;
  border-bottom: 5px solid #754b24;
  border-right: 0px;
  border-left: 0px;
  min-height: 200px;
  background-color: #422a1e;
}

.jumbotron img {
  width: 500px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.jumbotron h2, h3 {
  margin-top: -5px;
  font-weight: bold;
  color: #eeab1f;
}

.jumbotron p {
  font-weight: lighter;
  color: #ffffff;
  font-size: 15px;
}

.jumbotron img {
  width: 450px;
  height: auto;
}

.right img{
  width: 25px;
}


    .carousel-inner > .item > img, .carousel-inner > .item > a > img {
        display: block;
        height: 400px;
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        line-height: 1;
        margin: 0 auto;
    }
＆＃13; 
 <!DOCTYPE HTML>
<html lang="en">
<head>
<title>Conlins Coffee World Inc.</title>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/jquery.min1.js"></script>
  <script src="js/javascript-redirect.js"></script>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
	
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
  <span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
    
  </button>
      <a class="navbar-brand" href="#"><img src="images/brands/artisans.png"></a>
    </div>
    <div class="collapse navbar-collapse" id="navMain">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#"></a></li> 
      </ul>
    </div>
  </div>
</div>



	<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active" contenteditable="false"></li>
        <li data-target="#myCarousel" data-slide-to="2" class="" contenteditable="false"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item" style="">
            <img src="http://www.dogbehaviour.org.uk/wp-content/uploads/2016/06/EH-Dog-behaviour.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">First Slide Title</h4>
                <p class="">
                   Description for First Slide, this First Slide.
                </p>
            </div>
        </div>
        <div class="item active">
            <img src="http://www.oldnorthcanine.com/wp-content/uploads/2015/06/animal-dog-pet-sad-1920x500.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Second Slide Title</h4>

                <p class="">
                   Description for Second Slide, this is Second Slide.
                </p>
            </div>
        </div>
        <div class="item" style="">
            <img src="http://0104.nccdn.net/1_5/07f/260/1be/sophiebig.jpg" alt="" class="">
            <div class="carousel-caption">
                <h4 class="">Third Slide Title</h4>

                            <p class="">
                   Description for Third Slide, this is Third Slide.
                </p>
            </div>
        </div>
    </div>    

    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

删除margin-top 

.right {
  margin-top: 0px;
}
相关问题
最新问题