When i use bootstrap full slider,
(http://startbootstrap.com/template-overviews/full-slider/)
I have some issue. Like this.
As you can see, this image shows white space at right side.
in my code,
1. use wrapper class
2. wrapper > row, row, row
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| overflow-x: hidden; | |
| } | |
| /*navbar content*/ | |
| .custom-navbar { | |
| background-color: transparent; | |
| border: 0; | |
| padding-top: 2.5%; | |
| padding-bottom: 10px; | |
| padding-left: 0; | |
| position: absolute; | |
| } | |
| .custom-navbar .navbar-toggle { | |
| float: left; | |
| margin-left: 20px; | |
| } | |
| .custom-navbar .navbar-toggle:focus { | |
| background-color: inherit; | |
| } | |
| .custom-navbar .navbar-header { | |
| float: left; | |
| width: auto !important; | |
| margin-left: 5%; | |
| padding: 0; | |
| } | |
| .custom-navbar .navbar-brand { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| color: white; | |
| } | |
| .custom-navbar .collapse { | |
| float: right; | |
| margin-right: 20%; | |
| font-size: 18px; | |
| } | |
| .custom-navbar .navbar-nav>li>a { | |
| color: white; | |
| } | |
| /*slider*/ | |
| #myCarousel {} | |
| #myCarousel .carousel-control .icon-next, | |
| .carousel-control .icon-prev { | |
| width: 20%; | |
| height: auto; | |
| } | |
| .wrapper { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| } | |
| #content1 { | |
| background-color: #ffffff; | |
| padding-top: 5%; | |
| } | |
| #content2 { | |
| background-color: #ebebeb; | |
| padding: 5% 20%; | |
| } | |
| #content3 { | |
| background-color: #ffffff; | |
| padding: 5% 0; | |
| padding-bottom: 8%; | |
| border-bottom: 1px solid #d0d0d0; | |
| } | |
| #content4 { | |
| background-color: #ffffff; | |
| padding: 5% 0; | |
| padding-bottom: 8%; | |
| } | |
| #content5 { | |
| background-color: #ebebeb; | |
| padding-top: 5%; | |
| padding-bottom: 8%; | |
| } | |
| #content6 { | |
| background-color: #fc8f00; | |
| padding-top: 5%; | |
| padding-bottom: 8%; | |
| } | |
| #content7 { | |
| background-color: #6e6e6e; | |
| padding-top: 5%; | |
| padding-bottom: 3%; | |
| color: white; | |
| font-weight: 100; | |
| font-size: 1em; | |
| } | |
| /*phone*/ | |
| @media (max-width: 767px) { | |
| #myCarousel { | |
| margin-top: 50px; | |
| } | |
| .custom-navbar { | |
| background-color: #ff8c00 !important; | |
| padding-top: 5px; | |
| padding-bottom: 5px; | |
| position: fixed; | |
| } | |
| .custom-navbar .navbar-toggle { | |
| float: left; | |
| margin-left: 20px; | |
| border: 0; | |
| } | |
| .custom-navbar .navbar-header { | |
| margin-left: -10px; | |
| } | |
| .custom-navbar .li { | |
| float: left; | |
| } | |
| .custom-navbar .collapse.in { | |
| margin-top: 50px; | |
| border: 0; | |
| color: white; | |
| float: left; | |
| } | |
| .custom-navbar .navbar-collapse { | |
| margin-top: 50px; | |
| border: 0; | |
| color: white; | |
| float: left; | |
| } | |
| .custom-navbar .navbar-nav>li>a { | |
| color: white; | |
| } | |
| .custom-navbar .navbar-brand { | |
| display: block; | |
| position: absolute; | |
| width: 110px; | |
| left: 0; | |
| right: 0; | |
| padding: 15px 15px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| color: white; | |
| } | |
| #content2 { | |
| background-color: #ebebeb; | |
| padding: 4% 10%; | |
| } | |
| #content3 { | |
| padding-bottom: 12%; | |
| } | |
| #content4 { | |
| padding-bottom: 12%; | |
| } | |
| #content6 { | |
| padding-bottom: 12%; | |
| } | |
| #content7{ | |
| padding-bottom: 10%; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <title>test</title> | |
| <!-- Bootstrap Core CSS --> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <link href="css/full-slider.css" rel="stylesheet"> | |
| <link href="css/index.css" rel="stylesheet"> | |
| <link href="css/contents.css" rel="stylesheet"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation"> | |
| <div class="container" style="width:100%;"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#"> | |
| <img id="brand-img" src="img/logo.png" /> | |
| </a> | |
| </div> | |
| <!-- Collect the nav links, forms, and other content for toggling --> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li> | |
| <a href="#">li1</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- /.navbar-collapse --> | |
| </div> | |
| <!-- /.container --> | |
| </nav> | |
| <!-- Full Page Image Background Carousel Header --> | |
| <header id="myCarousel" class="carousel slide"> | |
| <!-- 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> | |
| </ol> | |
| <!-- Wrapper for Slides --> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <!-- Set the first background image using inline CSS below. --> | |
| <div class="fill"> | |
| <img id="s1-img" src="img/s1.jpg"> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <!-- Set the second background image using inline CSS below. --> | |
| <div class="fill"> | |
| <img id="s2-img" src="img/s2.jpg"> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <!-- Set the third background image using inline CSS below. --> | |
| <div class="fill"> | |
| <img id="s3-img" src="img/s3.jpg"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#myCarousel" data-slide="prev"> | |
| <img class="icon-prev" src="img/arrow1-prev.png"> | |
| </a> | |
| <a class="right carousel-control" href="#myCarousel" data-slide="next"> | |
| <img class="icon-next" src="img/arrow1-next.png"> | |
| </a> | |
| </header> | |
| <!-- Page Content --> | |
| <div class="wrapper"> | |
| <div class="row" id="content1"> | |
| <div class="col-lg-12"></div> | |
| </div> | |
| <div class="row" id="content2"> | |
| <div class="col-lg-12"></div> | |
| </div> | |
| <div class="row" id="content3" name="how-to-use"> | |
| <div class="col-lg-12"></div> | |
| </div> | |
| <div class="row" id="content4"> | |
| <div class="col-lg-12"></div> | |
| </div> | |
| <div class="row" id="content5"> | |
| <div class="col-xs-12 col-lg-12"></div> | |
| </div> | |
| <div class="row" id="content6"> | |
| <div class="col-lg-12"></div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="row" id="content7"></div> | |
| <!-- /.row --> | |
| </footer> | |
| </div> | |
| <!-- /.container --> | |
| <!-- jQuery --> | |
| <script src="js/jquery.js"></script> | |
| <!-- Bootstrap Core JavaScript --> | |
| <script src="js/bootstrap.min.js"></script> | |
| <!-- Script to Activate the Carousel --> | |
| <script> | |
| //carousel interval settings | |
| $('#myCarousel').carousel({ | |
| interval: 5000 //changes the speed | |
| }); | |
| </script> | |
| </body> | |
| </html> |
i just add to wrapper class
overflow-x: hidden;
and removed empty white space.
thats all.
Daily save the day post.
댓글 없음:
댓글 쓰기