My bootstrap grid system not working
Question
I had problem to apply my bootstrap gird system into the web-page. The bootstrap I applied is bootstrap 3.3.5, downloaded it from the getbootstrap.com . And I had all the config things done, here is my project files directory:
And here is my index.html structure:
<html>
<head>
<title>My bootstrap</title>
<meta charset="utf-8”>
<meta name="viewport” content="width=‘device-width’,inital-scale=1.0”>
<link href="css/bootstrap.min.css” rel="stylesheet”>
<link href="css/custom.css” rel="stylesheet”>
<script src="/js/respond.min.js”></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<p>text</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<p>text</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<p>text</p>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<p>text</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</div>
</body>
</html>
However the grid system not working when the browser size changed, it's always stay the original style as the 4 divs layout in vertical. Am I doing something wrong?
1 answers
solution1
0 ACCPTED 2015-10-29 09:05:16
Well, finally I found it's the punctuation that cause the problem! I should be more careful, and there're many things we should pay attention to it,like :
① The order of the jquery and the bootstrap css script to state.
② You should know a row is equal 12 columns,so don't abuse you row class.
③ Sometimes you should check you chrome extenssions ,it's maybe prohibit you load your local .js file.
④ Anyway more careful more better.
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.