Question

I'm trying to decrease the height and width of carousel, looking at the other answers I think I'm close to achieving it however it doesn't look like as I want it to look,it looks something like this

http://tinypic.com/r/fodpns/9

How can I get rid of the annoying white space?

Here is the html code

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Logo</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

   <link rel="stylesheet" type="text/css" href="css/flower.css">



    </head>
  <body>
 <div class=" container navbar navbar-default navbar-fixed-top ">
      <!-- <div class="container"> -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

          </button>
          <a class="navbar-brand" href="#">Logo</a>
        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#my account">My Account</a></li>
            <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  <!-- </div> -->

<!-- <div id="myCarousel" class="carousel slide space" data-ride="carousel" style="width: 600px!important;" > -->
<div align="middle" id="myCarousel" class="carousel slide space" data-ride="carousel" style="width: 600px!important;" >
  <!-- 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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/350x150" alt="Chania" style="height:380px">

    </div>

    <div class="item">
      <img src="pic/pic1.jpg" alt="Chania" style="height:380px" >

    </div>

    <div class="item">
      <img src="pic/pic2.jpg" alt="Flower" style="height:380px">

    </div>

    <div class="item">
      <img src="pic/pic3.jpg" alt="Flower" style="height:380px">

    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">&lsaquo;
    <!-- <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">&rsaquo;
   <!--  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span> -->
  </a>
</div>
  <div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/350x150" alt="...">
    </a>
  </div>
  ...
</div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>


</body>

</html>

The CSS file

html {
    background: url(../pic/backgrounf.jpg) no-repeat center fixed; 
    background-size: cover;
}

/*@media (min-width: 1200px) {
    .navbar {
        max-width: 970px;
    }
}
*/

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}


.topbar{
    /*background-color: #F08080;*/
    background-color:#FADBD8;
    /*opacity: 0.5;*/
    color: black;
}

.space{
    margin-top: 58px;
    margin-left: 154px;

}

Answer 1

<div align="middle" id="myCarousel" class="carousel slide space" data-ride="carousel" style="width: 600px!important;" >

我使用这个修改了代码的一些修改，

Decreasing height and width of carousel bootstrap

1 个答案: