Menu
What is causing Twitter Bootstrap's buttons horizontal separation?
I can't find it in CSS code.
I'm trying to repeat the very same for vertical, but it seems that I'm failing to achieve this:
How can I add vertical separation between buttons, only if they're stacked vertically (second picture), but avoiding the same (unnecessary in this case), when they're not (first picture)?
EDIT: Code used to generate above pictures:
<div class="container-fluid">
<div class="row-fluid">
<div class="well well-small" id="menu-buttons">
<div class="pull-left" style="width: 48%">
<a class="btn btn-small">@ Style ^</a>
<a class="btn btn-small">@ Language ^</a>
</div>
<div class="pull-right text-right" style="width: 48%;">
<a class="btn btn-small">@ Device</a>
<a class="btn btn-small">@ Webpage</a>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
413
What I would do is something like this:
.btn {
margin: 2px;
}
.well {
padding: 7px;
}
So I addedd a margin of 2px around each button, and reduced the padding of the container (.well) by 2 pixels. This way your 'full width' style remains unchanged, and the 'narrow' style will now have a 4 pixel spacing between the buttons.
You may want to ad an extra id or something in front of those selectors, to make it only work on your "#menu-buttons"
And an example: http://jsfiddle.net/eHYnQ/
175
You can do it by adding a margin-bottom property to your buttons. In the first picture, it's probably a float: right; with a margin-right: 5px;
27
It's the row-fluid class who causes the horizontal margin.
You can make a row-fluid in a row fluid to get vertical spacing.
See the bootstrap - fluidGridSystem at Fluid nesting..
span classes to fix the width
Here is my code :
Warning Remove the <div class="span3" style="background-color:whitesmoke"> for a full screen wide div
<!Doctype html>
<html>
<head>
<link href="../css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="span3" style="background-color:whitesmoke">
<div class="row-fluid">
<div class="row-fluid">
<div class="span6">
<button>1</button>
</div>
<div class="span6">
<button class="pull-right">2</button>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<button>3</button>
</div>
<div class="span6">
<button class="pull-right">4</button>
</div>
</div>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
