Bootstrap旋转木马全屏幕
我试图让引导转盘中的图像显示全屏，但一直无法弄清楚，我一直在这个工作一段时间，完全卡住了。 现在我只有一个图像，但是一旦它工作，我会添加更多…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Carousel Template · Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <style> /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { color: #5a5a5a; height: 100%; width: 100%; min-height: 100%; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; left: 0; right: 0; z-index: 10; margin-top: 20px; } .navbar-wrapper .navbar { } /* Remove border and change up box shadow for more contrast */ .navbar .navbar-inner { border: 0; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); } /* Downsize the brand/project name a bit */ .navbar .brand { padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */ font-size: 16px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0,0,0,.5); } /* Navbar links: increase padding for taller navbar */ .navbar .nav > li > a { padding: 15px 20px; } /* Offset the responsive button for proper vertical alignment */ .navbar .btn-navbar { margin-top: 10px; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 0px; } .carousel .container { position: relative; z-index: 9; } .carousel .item { height: 100%; } .carousel-inner { overflow:hidden; width: 100%; min-height: 100%; position:relative; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; } .carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (max-width: 979px) { .container.navbar-wrapper { margin-bottom: 0; width: auto; } .navbar-inner { border-radius: 0; margin: -20px 0; } .carousel img { width: auto; height: 500px; } .featurette { height: auto; padding: 0; } .featurette-image.pull-left, .featurette-image.pull-right { display: block; float: none; max-width: 40%; margin: 0 auto 20px; } } @media (max-width: 767px) { .navbar-inner { margin: -20px; } .carousel { margin-left: -20px; margin-right: -20px; } .carousel img { height: 300px; } .carousel-caption { width: 65%; padding: 0 70px; margin-top: 100px; } .carousel-caption h1 { font-size: 30px; } .carousel-caption .lead, .carousel-caption .btn { font-size: 18px; } .marketing .span4 + .span4 { margin-top: 40px; } .featurette-heading { font-size: 30px; } .featurette .lead { font-size: 18px; line-height: 1.5; } } </style> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png"> </head> <body> <!-- NAVBAR ================================================== --> <div class="navbar-wrapper"> <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. --> <div class="container"> <div class="navbar navbar-inverse"> <div class="navbar-inner"> <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Treyca</a> <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="fluid.html">Beta</a></li> <li><a href="#contact">Contact</a></li> <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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 class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div><!-- /.navbar-inner --> </div><!-- /.navbar --> </div> <!-- /.container --> </div><!-- /.navbar-wrapper --> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="../assets/img/examples/Bar-1.jpg" alt=""> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <a class="btn btn-large btn-primary" href="#">Sign up today</a> </div> </div> </div> </div> <!-- FOOTER --> <footer> <p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </div><!-- /.carousel --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="../assets/js/jquery.js"></script> <script src="../assets/js/bootstrap-transition.js"></script> <script src="../assets/js/bootstrap-alert.js"></script> <script src="../assets/js/bootstrap-modal.js"></script> <script src="../assets/js/bootstrap-dropdown.js"></script> <script src="../assets/js/bootstrap-scrollspy.js"></script> <script src="../assets/js/bootstrap-tab.js"></script> <script src="../assets/js/bootstrap-tooltip.js"></script> <script src="../assets/js/bootstrap-popover.js"></script> <script src="../assets/js/bootstrap-button.js"></script> <script src="../assets/js/bootstrap-collapse.js"></script> <script src="../assets/js/bootstrap-carousel.js"></script> <script src="../assets/js/bootstrap-typeahead.js"></script> <script> !function ($) { $(function(){ // carousel demo $('#myCarousel').carousel() }) }(window.jQuery) </script> <script src="../assets/js/holder/holder.js"></script> <style> body { background-color: black; color: #FFFFFF; } </style> </body> </html> 确保传送带项目内的img设置为高度和宽度100％。 您还必须确保传送带和任何.item容器（HTML，正文）是100％…
html,body{height:100%;} .carousel,.item,.active{height:100%;} .carousel-inner{height:100%;}
Boostrap全屏旋转木马演示
以下是Bootstrap 3.x的示例： http : //www.codeply.com/go/2tVXo3mAtV
几乎在每个引导项目中都使用全宽滑块。 这是我的方法：
1）将传送带包装到一个自定义的全宽度容器（在任何.container类之外）
2）将图像幻灯片及其容器的宽度设置为100％
3）根据需要设置滑块的高度
它是这样的：
<section class="block"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="active item"> <img src="http://lorempixel.com/1024/750" alt="Slide1" /> </div> <div class="item"> <img src="http://lorempixel.com/1024/750" alt="Slide2" /> </div> <div class="item"> <img src="http://lorempixel.com/1024/750" alt="Slide3" /> </div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </section>
而CSS将如下所示：
.carousel .item { width: 100%; /*slider width*/ max-height: 600px; /*slider height*/ } .carousel .item img { width: 100%; /*img width*/ } /*full width container*/ @media (max-width: 767px) { .block { margin-left: -20px; margin-right: -20px; } }
我在startbootstrap.com上find了答案。 试试这个代码：
CSS
html, body { height: 100%; } .carousel, .item, .active { height: 100%; } .carousel-inner { height: 100%; } /* Background images are set within the HTML using inline CSS, not here */ .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } footer { margin: 50px 0; }
HTML
<div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> <div class="carousel-caption"> <h2>Caption 1</h2> </div> </div> <div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> <div class="carousel-caption"> <h2>Caption 2</h2> </div> </div> <div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> <div class="carousel-caption"> <h2>Caption 3</h2> </div> </div> </div>
资源
我有同样的问题，我尝试了上面的答案，但我想要更薄的东西，然后我试图改变一个接一个opsions，并发现我们只需要添加
.carousel { height: 100%; }
我就是这么做的 这使得幻灯片中的图像占据全屏幕，如果它的宽高比允许的话，它可以缩小。
.carousel { height: 100vh; width: 100%; overflow:hidden; } .carousel .carousel-inner { height:100%; }
为了总是得到一个全屏幕的幻灯片，无论屏幕宽高比，你还可以使用物体适合:(不在IE或边缘工作）
.carousel .carousel-inner img { display:block; object-fit: cover; }
