Bootstrap grid layout is not working?
Question
I don't know where I am missing something, but grid system is not working at all. I am using firefox. Is there any problem with require_once or well? Here is index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Study Surge</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php require_once('navbar.php');?>
<?php require_once('home.html'); ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is home.html:
<div class="well">
<div class="container">
<div class="row">
<div class="well engineering">
<div class="col-md-3">
<img src="image/engiico.gif">
<h1>Engineering</h1>
</div>
</div>
<div class="well engineering">
<div class="col-md-3">
<img src="image/engiico.gif">
<h1>Engineering</h1>
</div>
</div>
</div>
</div>
</div>
The overall result gives:
2 answers
solution1
2 ACCPTED 2015-04-03 19:59:35
A few things:
Both of your columns are wrapped in row elements, which clear the floated column divs.
Is the path to your css file correct? If it is in a 'css' folder, you probably want:
<link href="/css/bootstrap.min.css" rel="stylesheet">
Same would go for your bootstrap javascript file.
Also, you probably want to take another look at the bootstrap grid system: http://getbootstrap.com/css/#grid
The 'container' class would probably be the outermost element. Only columns can be immediate children of rows.
<div class="container">
<div class="row">
<div class="col-md-3 engineering well">
<img src="xyz" />
</div>
<div class="col-md-3">
<img src="xyz" />
</div>
</div>
</div>
solution2
1 2015-04-03 20:01:40
The problem is that you have a parent div surrounding each grid-item. Divs are block elements by default so they will take up 100% of their parent's width. When you wrap a grid element with a div, the grid will work but only on that element. You need to re-write the grid to something like this:
<div class="col-md-3">
<div class="well engineering">
<img src="image/engiico.gif">
<h1>Engineering</h1>
</div>
</div>
Or you could do:
<div class="col-md-3 well engineering">
<img src="image/engiico.gif">
<h1>Engineering</h1>
</div>
With the 2nd solution, make sure .well or .engineering don't modify margins or width since that will break the grid.
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.