CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mr. Freeman
Mr. Freeman

Reputation: 31

Bootstrap: <a> removes left and right margin from span

I'm pretty new to Twitter Bootstrap and I have a problem that I would suspect is pretty easy to overcome, if you know where to look ;o)

I have wrapped 3 <span4> in <a>. This removes the margin/gutter between the <span4> which is not what I want. I have tried to add the margin by:

a > .span4 { margin: 0 1.7% };

However, this solution does not work entirely as intended when you resize the browser. Does anyone have a suggestion to how I can fix this?

Here is my HTML:

<div class="container-fluid">    
    <div class="row-fluid">
        <div class="span8 offset2">     
            <a href="#"><div class="span4">
                <h2>Box 1</h2>
                <p>Text here</p>
            </div></a>
            <a href="#"><div class="span4">
                <h2>Box 2</h2>
                <p>Text here</p>
            </div></a>
            <a href="#"><div class="span4">
                <h2>Box 3</h2>
                <p>Text here</p>
            </div></a>
        </div>
    </div>
</div>

It looks like this (just added a white background-color for test):

enter image description here

I would like to have a responsive margin between the <span4> divs like they have without the <a> wrapping.

I hope you will be able to help me. Thanks.

Kind regards - Jesper

Upvotes: 1

Views: 371

Answers (3)

snumpy
snumpy

Reputation: 2878

In order to nest spans, you need to create a new row-fluid div.

Edit: you'll also want your links inside your span divs (which works fine if you make them display:block;)

Here's some jsFiddle

<div class="container-fluid">    
    <div class="row-fluid">
        <div class="span8 offset2"> 
            <div class="row-fluid">    <!-- make sure to add this div-->
                <div class="span4">
                    <a href="#">
                        <h2>Box 1</h2>
                        <p>Text here</p>
                    </a>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    a,a:link {
        display:block;
        background-color:#fff;
    }
</style>

Upvotes: 1

jamesplease
jamesplease

Reputation: 12869

I'd suggest simply using the a as the grid piece rather than the div it contains. For instance:

<a href="#" class="span4">
  <div>
    <h2>Box 1</h2>
    <p>Text here</p>
  </div>
 </a>

And, at this point, you may choose to get rid of the containing div altogether.

Why do this? Well, it gives you the width, padding, and margin that you want without needing to write more code. And it's no less semantic than using the div as the grid piece.

The Bootstrap grid system is pretty complete, and Ponraj's solution is writing more code to do something that's already there. You should probably only extend the grid system if you're trying to add more functionality to it.

Upvotes: 0

PonrajPaul
PonrajPaul

Reputation: 174

default display of a tag is display:inline;

you just try to add display:block for that a tag 

a{display:block}

then you try with this

a > .span4 { margin: 0 1.7% };

Upvotes: 0

Related Questions