Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

column are full width in IE 8 - Css bootstrap

I use bootstrap 3.0.3 in my web page and add html5shiv lib and respond lib for fix it this but it is not worked on internet explorer 8.

my html code:

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

Its worked good in FF and Webkits browsers but result in IE :

enter image description here

Now demo is here, how can I fix it?

like image 936
A1Gard Avatar asked Dec 27 '13 14:12

A1Gard


People also ask

How do I make 8 columns in Bootstrap?

The simple method to get 8 equal columns is to use the auto-layout columns... Show activity on this post. As BenM said above, Bootstrap uses a 12 column grid system, which won't divide cleanly into 8 equal columns. If you absolutely require 8 columns, it might be worth checking out this, or even rolling your own.

Which Bootstrap class takes full width?

The . container-fluid class provides a full width container, spanning the entire width of the viewport.

What is Col 12 Bootstrap?

the numbers (1-12) represent a portion of the total width of any div. all divs are divided into 12 columns. so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc.

What is Col MD 4?

col-md-4: This class is used when the device size is medium or greater than 768px and the maximum width of container is 720px and you want the width equal to 4 columns. col-xs-1: This class is used when the device size is extra small (mobile) and when you want the width to be equal to 1 column.


4 Answers

Based on the solution in the thread : Must Bootstrap container elements include row elements?, your markup should be :

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

and use this CSS to achieve it in IE8:

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

here is the working demo

The .row class is not required inside a .container, but if you include then, container > row is the order not row > container (which you code)!

EDIT

It might be worth noting that respond.js only works for local files. So if you have got css files of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of bootstrap.css

Internet Explorer 8 and Respond.js

Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

Respond.js and file:// Due to browser security rules, Respond.js doesn't work with pages viewed via the file:// protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). See the Respond.js docs for details.

Respond.js and @import Respond.js doesn't work with CSS that's referenced via @import. In particular, some Drupal configurations are known to use @import. See the Respond.js docs for details.

IE Compatibility modes Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate tag in your pages:

Source : Getbootstrap

like image 167
NoobEditor Avatar answered Nov 05 '22 05:11

NoobEditor


If "responsiveness" is not required, you can use col-xs-* classes instead of setting up proxy for respond.js. It works, because col-xs-* classes are media-agnostic. It solved the issue in my case.

like image 35
ideafixxxer Avatar answered Nov 05 '22 05:11

ideafixxxer


It might be better to apply this in a way that would only apply to IE and not any other browsers as it can break some of your responsive web sites. This page speaks specifically to how to apply IE only CSS.

Apply CSS rules if browser is IE

like image 23
Dusten Lee Harward Avatar answered Nov 05 '22 05:11

Dusten Lee Harward


Addition you need remember that bootstrap.css is above respond.js in your head section:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap example</title>

    <noscript>
        <link rel="stylesheet" href="../assets/css/noscript.css" />
    </noscript>

    <!-- Bootstrap -->
    <link href="../assets/bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">

    <!--[if lte IE 8]>
    <script src="../assets/js/ie/es5-shim.min.js"></script>
    <script src="../assets/js/ie/es5-sham.min.js"></script>
    <script src="../assets/js/ie/html5shiv.js"></script>
    <script src="../assets/js/ie/respond.min.js"></script>
    <![endif]-->
</head>
like image 42
Den Avatar answered Nov 05 '22 06:11

Den