我正在使用Bootstrap Carousel,它似乎在我的网站中没有出现

时间:2015-09-12 10:49:54

标签: twitter-bootstrap twitter-bootstrap-3

如何调整旋转木马的大小,使其适合我希望它适合的盒子。谢谢。

此文件在我的网页中是mylife.html :(其他的html文件)

<html>
<head>
<title>My Homepage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="webpage.css">
</head>
<body id="mylife">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
     <b class="navbar-brand">My Site</b>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="index"><a href="index.html">Home</a></li>
        <li class="experience"><a href="experience.html">Experience</a></li>
        <li class="video"><a href="videos.html">Videos</a></li>
        <li class="mylife"><a href="mylife.html">My Life</a></li>
    <li class="feedback"><a href="feedback.html">Feedback</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="jumbotron">
<div class="box">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="carousel/csonight1.jpg" alt="Team Photo">
      <div class="carousel-caption">
        <h3>A photo with my team at CSE ONight !</h3>
        <p>I felt happy to meet new people there.</p>
      </div>
    </div>

    <div class="item">
      <img src="carousel/csonight2.jpg" alt="Battlefield">
      <div class="carousel-caption">
        <h3>Playing Battlefield Game at CSE ONight !</h3>
        <p>The game was to hit others and avoid getting hit while being blind-folded and your team member tells you the directions.</p>
      </div>
    </div>

  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
</div>
</body>
</html>

此文件是webpage.css(css文件)

.jumbotron{
    position:relative;
    background : #000  url(background.jpg) center center;
    width:100%;
    height:100%;
    background-size: cover;
    overflow:hidden;
    margin-bottom:0px;
} 
.box{
    position:relative;
    background-color:#5DBCD2;
    width:90%;
    margin-top:0.5%;
    height:98.5%;
    margin-bottom:1%;
    margin-left:5%;
    margin-right:5%;
}
.navbar{
     min-height: 60px;
     margin-bottom:0px;
}
.navbar-inverse{
    background-color:#00FF00;
    border-color:#00FF00;
    font-size:150%;
    font-weight:bold;
}
.navbar-inverse .navbar-nav>li>a {
    color:#000000;
}
.navbar-inverse .navbar-brand {
    color: #ff0000;
    font-weight: bold;
    font-size:150%;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
    background-color:#800080;
}
#index .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.index, #experience .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.experience, #video .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.video ,#mylife .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.mylife ,#feedback .navbar-inverse>.container-fluid>.navbar-collapse>.navbar-nav>.feedback
{
    background-color:#ff69b4;
}

1 个答案:

答案 0 :(得分:1)

要更改轮播的大小,您只需编辑

的CSS尺寸
<div class="jumbotron"> 

因为那是第一个div。 所以在你的css文件中,例如:

.jumbotron{
height:300px;
width:100%;
}

根据我应有的经验,然后确保您的图片大小正确