Bootstrap grid not working properly in google chrome
Question
So I have this website that uses a bootstrap grid system and which works 100% perfectly on firefox but not properly on google chrome or safari.
How is this so?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
<li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
<li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
<li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
<li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
<li role="presentation"><a href="#INDEX" aria-controls="INDEX" role="tab" data-toggle="tab">INDEX</a></li>
</ul>
</div>
<div class="container">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="index">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
<div class="col-md-4 col-lg-4">
<img src="images/placeholder.jpg" class="img-responsive">
<div class="well">
Lorem ipsum
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="INDEX">...</div>
</div>
</div>
</div>
</body>
</html>
Firefox:
Google chrome and safari:
UPDATE
Edited the post with the complete HTML.
1 answers
solution1
0 2018-09-11 17:52:49
According to Bootstrap 3 documentation , there's an error with justified navs "in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing". Perhaps that produces a conflict between elements, make some changes to see if your problem goes into that direction.
Please keep us updated and/or confirm if you have already found a solution. Best regards!
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.