I like the way nested columns look but I just wanted to add a little
spacing (say 5 pixels) around the edges. By setting the properties:
"margin-top:5px; margin-bottom:5px;" I am able to create space above and
below the rows without trouble. But setting left/right margins seems to
either not work, or screws up the scaffolding somehow.
Here is my html:
[code]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
.box {
background:blue; border-radius: 10px;
overflow:auto; color: white;
margin-top:5px; margin-bottom:5px;
}
.greyClass {
background:grey;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js";></script>
<script src="js/bootstrap.min.js"></script>
<div class="row-fluid">
<div class="span12 box greyClass">
<div class="row-fluid">
<div class="span6 box "><center>A</center></div>
<div class="span6 box "><center>B</center></div>
</div>
<div class="row-fluid">
<div class="span6 box "><center>C</center></div>
<div class="span6 box "><center>D</center></div>
</div>
</div>
</div>
</body>
</html>
[/code]
Below is a screenshot of the result.
<https://lh5.googleusercontent.com/-mjL2XfmNn0E/UbtG-11G7NI/AAAAAAAAAAg/H4O9aZqmf_o/s1600/bootstrap_screenshot.jpg>
I have tried many combinations such as putting left/right margin attributes
on only the row divs, and only the span divs. So far no combination has
worked correctly. Any advice would be appreciated!
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
