For the left and right padding to work, you'll also need to apply
box-sizing<http://css-tricks.com/box-sizing/>,
otherwise, your margins make the spans too wide to keep the grid.
On Friday, June 14, 2013 5:40:31 PM UTC+1, thegeneralsolution wrote:
>
> 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.
