Bootstrap - 调整Carousel的高度

时间:2014-09-06 12:08:37

标签: html css twitter-bootstrap

我有一个容器液体的旋转木马。我试图降低旋转木马的高度,但我无法这样做。我尝试了它不起作用的风格。目前,轮播占据了整个网页的宽度和高度。

我该怎么做呢?

以下是我的代码:

CSS

header {
  background: #f16251;
  color:#000000;
}

header h1,header h2,header h3 a,header a,header a:hover {
  color:#101010;
  font-weight:800;
  text-decoration:none;
}

header h3 {
  font-family: 'Kreon', serif;
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  font-size:34px;
  padding:12px 10px 6px 10px;
}

header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">

    </head>
    <body>

<!-- Wrap all page content here -->
<div id="wrap">
    <header class="masterhead">
       <!-- <div class="container">-->
                <div class="container-fluid">
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <!-- item 1 -->
                <div class="item active">
                    <img src="img/Nielsen.png" alt="">
                    <div class="carousel-caption">
                        <h4>Testing </h4>
                        <p>Testing Testing</p>
                        </br>
                    </div>
                </div>
                <!-- item 2 -->
                <div class="item">
                    <img src="img/UIParade.png" alt="">
                    <div class="carousel-caption">
                        <h4>Testing Image 2</h4>
                        <p>Testing Testing</p>
                        </br>
                        <a class="btn btn-primary" target="_blank" href="http://www.uiparade.com/">Learn 
more</a>
                    </div>
                </div>
            </div>
        </div>
</div>
                <!--<div class="col-sm-6">
                    <h1><a href="#" title="Bootstrap Template">Evon Chong</a>
          <p class="lead">{A Bootstrap Template}</p></h1>
                </div>-->
                <!--<div class="col-sm-6">
                    <div class="pull-right  hidden-xs">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h3><i class="glyphicon glyphicon-cog"></i></h3></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Link</a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-user"></i> Link</a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Link</a>
                            </li>
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Link</a>
                            </li>
                        </ul>
                    </div>
                </div>-->
            </div>
        </div>
    <!--</header>-->


    <!-- Fixed navbar -->
    <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
        <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>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav nav-justified">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#section2">About</a>
                    </li>
                    <li><a href="#section3">My Skills</a>
                    </li>
                    <li class="active"><a href="#section1"><strong>Education</strong></a>
                    </li>
                    <li><a href="#section4">Portfolio</a>
                    </li>
                    <li><a href="#section5">Contact</a>
                    </li>
                    <!--<li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <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><a href="#">Separated link</a>
                            </li>
                            <li><a href="#">One more separated link</a>
                            </li>
                        </ul>
                    </li>-->
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container -->
    </div>
    <!--/.navbar -->

    <!-- Begin page content -->
    <div class="divider" id="section1"></div>

    <div class="container">
        <div class="col-sm-10 col-sm-offset-1">
            <div class="page-header text-center">
                <h1>Sticky Footer with Fly-in Navbar</h1>
            </div>

            <p class="lead text-center">
                Twitter Bootstrap is a front-end toolkit to rapidly build web applications.
            </p>
            <p class="text-center">
                Bootstrap is a framework that uses some of the latest browser techniques to provide you with stylish typography, navigation, buttons, tables, etc. One of the primary changes in Bootstrap 3 is an emphasis on Mobile-First responsive design. The goal is to elevate the mobile experience to a first-class citizen of the design process, because several billion mobile users is quite a large market to tap into. So, sites built with the current Bootstrap version target mobile devices and scale for larger screens depending on screen size.
            </p>
        </div>
    </div>

    <div class="divider" id="section2"></div>

    <section class="bg-1">
        <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2>
        </div>
    </section>

    <div class="divider"></div>

    <div class="container" id="section3">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <h1>Mobile-first + Responsive</h1>

            <p>
                Instead of creating a unique version of the webpage for each desktop, mobile &amp; tablet, you can now create one design that works on all devices, browsers &amp; resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size.
            </p>

            <hr>

            <img src="/assets/example/bg_smartphones.jpg" class="img-responsive">

            <hr>
        </div>
        <!--/col-->
    </div>
    <!--/container-->

    <div class="divider"></div>

    <section class="bg-3" id="section4">
        <div class="col-sm-6 col-sm-offset-3 text-center">
            <h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets &amp; Examples</h2>
        </div>
    </section>

    <div class="continer bg-4">
        <div class="row">
            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div>
                        <img src="//placehold.it/450X250/565656/eee" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">Hacker News</p>
                        <p>120k Followers, 900 Posts</p>

                        <p>
                            <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->

            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div class="panel-thumbnail">
                        <img src="//placehold.it/450X250/ffcc33/444" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">Bootstrap Templates</p>
                        <p>902 Followers, 88 Posts</p>

                        <p>
                            <img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->
            </div>
            <!--/col-->

            <div class="col-sm-4 col-xs-6">

                <div class="panel panel-default">
                    <div class="panel-thumbnail">
                        <img src="//placehold.it/450X250/f16251/444" class="img-responsive">
                    </div>
                    <div class="panel-body">
                        <p class="lead">Social Media</p>
                        <p>19k Followers, 789 Posts</p>

                        <p>
                            <img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" width="28px" height="28px">
                            <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" width="28px" height="28px">
                        </p>
                    </div>
                </div>
                <!--/panel-->

            </div>
            <!--/col-->
        </div>
        <!--/row-->
    </div>
    <!--/container-->

    <div class="divider" id="section5"></div>

    <div class="row">

        <h1 class="text-center">Where In The World?</h1>

        <div id="map-canvas"></div>

        <hr>

        <div class="col-sm-8">

            <div class="row form-group">
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
                </div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="">
                </div>
                <div class="col-xs-4">
                    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-5">
                    <input type="email" class="form-control" name="email" placeholder="Email" required="">
                </div>
                <div class="col-xs-5">
                    <input type="email" class="form-control" name="phone" placeholder="Phone" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-10">
                    <input type="homepage" class="form-control" placeholder="Website URL" required="">
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-10">
                    <button class="btn btn-default pull-right">Contact Us</button>
                </div>
            </div>

        </div>
        <div class="col-sm-3 pull-right">

            <address>
        <strong>Iatek, LLC.</strong><br>
        795 Folsom Ave, Suite 600<br>
        Newport, RI 94107<br>
        P: (123) 456-7890
      </address>

            <address>
        <strong>Email Us</strong><br>
        <a href="mailto:#">first.last@example.com</a>
      </address> 
        </div>

    </div>
    <!--/row-->

    <div class="container">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <h2>Beautiful Bootstrap Templates</h2>

            <hr>
            <h4>
        We love templates. We love Bootstrap.
      </h4>
            <p>Get more free templates like this at the <a href="http://bootply.com">Bootstrap Playground</a>, Bootply.</p>
            <hr>
            <ul class="list-inline center-block">
                <li>
                    <a href="http://facebook.com/bootply">
                        <img src="/assets/example/soc_fb.png">
                    </a>
                </li>
                <li>
                    <a href="http://twitter.com/bootply">
                        <img src="/assets/example/soc_tw.png">
                    </a>
                </li>
                <li>
                    <a href="http://google.com/+bootply">
                        <img src="/assets/example/soc_gplus.png">
                    </a>
                </li>
                <li>
                    <a href="http://pinterest.com/in1">
                        <img src="/assets/example/soc_pin.png">
                    </a>
                </li>
            </ul>

        </div>
        <!--/col-->
    </div>
    <!--/container-->

</div>
<!--/wrap-->

<div id="footer">
    <div class="container">
        <p class="text-muted">This Bootstrap Example courtesy <a href="http://www.bootply.com">Bootply.com</a>
        </p>
    </div>
</div>

<ul class="nav pull-right scroll-top">
    <li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a>
    </li>
</ul>

        <!-- JavaScript placed at the end of the document so the pages load faster -->
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

试试这个:

style="height:500px" in the carousel tag

HTML:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height:500px">