stackoom
  简体   繁体   中英

Twitter-Bootstrap & IE grid system issues

 原文  2015-08-13 12:12:39  8   1    html/ css/ twitter-bootstrap/ internet-explorer

Question

I'm currently working on a new bootstrap markup for a website and it looks completely as wanted in the Google Chrome - but when I switch to IE11 it looks like the grid system is screwed.

I've specified viewport, IE=edge etc. and tried to include respond.js as various google searches suggested. The website looks fine with xs screen size but for bigger screen sizes the container overflows the window, thus not adapting to the size of the screen.

Can you help me out? The website is available at thyrace.dk/etape and the markup right beneath.

Thank you very much. 

 @-ms-viewport { width: device-width; } @viewport { width: device-width; } html, body { height: 100%; } body { background-image: url("../img/bg.png"); background-repeat: repeat; font-size: 13px; } .wrapper { height: 100%; display: table; } .navbar { background-color: white; } .content { background-color: white; height: 100%; padding: 20px; } main, aside { margin-top: 10px; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav li > a:hover { color: #FFF; background: grey; } aside { padding: 0; width: 100%; } aside img { float: left; margin: 0 0 5px 5px; } /* Carousel */ .carousel { margin-bottom: 20px; margin: 0 10px 0 10px; } .carousel .item { height: 225px; background-color: #555; } .carousel img { position: absolute; top: 0; left: 0; } .carousel-caption h4 { margin: 0; background-color: rgba(175, 0, 0, 0.50); } .carousel-indicators { top: 10px; height: 20px; } .carousel-text { z-index: 1; position: absolute; bottom: 20px; right: 0; padding: 15px; width: 400px; max-width: 100%; background-color: grey; color: white; } .carousel-text h2 { font-size: 14px; font-weight: bold; margin: 0; padding: 0; } .navbar-default .navbar-nav li { margin-bottom: 1px; } @media (min-width: 768px) { .wrapper { padding: 20px 0 20px 0; } .navbar-collapse { height: auto; border-top: 0; box-shadow: none; max-height: none; padding-left:0; padding-right:0; } .navbar-collapse.collapse { display: block !important; width: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-x: visible; } .navbar { margin-right: 0; margin-left: 0; border-radius: 0px; } .navbar-nav, .navbar-nav > li, .navbar-left, .navbar-right, .navbar-header { float: none !important; } .navbar-right .dropdown-menu { left: 0; right: auto; } .navbar-logo { padding: 0 10px 10px 10px; } .page-return { width: 100%; text-align: center; margin-top: 5px; font-size: 11px; } } 
 <!DOCTYPE HTML> <html lang="da" > <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ThyRace.dk - Løb med naturoplevelser i Thy</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/purple-color-scheme.css"> </head> <body> <div class="container wrapper"> <div class="col-xs-12 col-sm-3 col-md-2"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="hidden-xs page-return"> <a href="http://thyrace.dk">Tilbage til hovedoversigten</a> </div> <img src="img/logo_etape.png" class="img-responsive navbar-logo hidden-xs" alt="" /> <a class="navbar-brand visible-xs" href="#"> Etapeløb Thy Trail </a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="visible-xs"><a href="http://thyrace.dk">Tilbage til thyrace.dk</a></li> <li class="active"><a href="index.htm">Løbsinformation</a></li> <li><a href="rute.htm">Rute</a></li> <li><a href="#">Tilmelding</a></li> <li><a href="#">Startliste</a></li> </ul> </div> </nav> </div> <div class="col-xs-12 col-sm-9 col-md-10"> <div class="navbar navbar-default content"> <div class="row"> <div id="carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="img/slider/1.jpg" alt="" /> </div> <div class="item"> <img src="img/slider/2.jpg" alt="" /> </div> <div class="item"> <img src="img/slider/3.jpg" alt="" /> </div> <div class="item"> <img src="img/slider/4.jpg" alt="" /> </div> </div> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> <li data-target="#carousel" data-slide-to="3"></li> </ol> <div class="carousel-text"> <h2>Fredag d. 30. oktober - Søndag 1. november 2015</h2> </div> </div> <!-- End carousel --> </div> <!-- End carousel row --> <div class="row"> <div class="col-xs-12 col-sm-9"> <main> Bla bla bla </main> </div> <div class="col-xs-12 col-sm-3"> <aside> <img src="http://dummyimage.com/250x100/000/ffffff&text=250*100" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Advertisement" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive"> <img src="http://dummyimage.com/250x100/000/ffffff&text=Some+ad" class="img-responsive"> </aside> </div> <!-- End aside wrapper --> </div> <!-- End main + aside row --> </div> <!-- End navbar --> </div> <!-- End content col --> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

1 answers

solution1
 0 ACCPTED  2015-08-13 12:25:12

Your DOM is not as per bootstrap you've to use something like that 

<div class="wrapper">
  <div class="container">
    <div class="row>
      <div class="col-xs-12 col-sm-3 col-md-2">

And You've used display:table for your wrapper viz causing the layout issue for IE as well as in FF Also for better results stop using your custom class along with bootstrap class otherwise it will misbehave at some points.

For eg:

Instead of using: 

<div class="col-md-6 yourClass">

you should use: 

<div class="col-md-6">
  <div class="yourClass">

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question twitter-bootstrap and html How to hide too long text in a twitter-bootstrap grid table? Middle row height fit in twitter-bootstrap grid sytem Paypal not integrating into Twitter-Bootstrap Float not working with Twitter-Bootstrap text alignment in twitter-bootstrap Twitter-bootstrap Layout for form Responsive wells in Twitter-Bootstrap? position of twitter button in twitter-bootstrap navbar twitter-bootstrap carousel css image resizing
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM