CODEWITHSUNDEEP
twitter-bootstraptabs
curious1
curious1

Reputation: 14717

Bootstrap tab: have unknown space between tabs

I am puzzled by the space between Bootstrap tabs in my particular case.

I am using Bootstrap 2.3.2 and Ace Theme (http://wrapbootstrap.com/preview/WB0B30DGR) for a web application.

Here is my HTML:

    <div>
        <ul class="nav nav-tabs " id="my-tabs">
          <li><a href="#page-1" data-toggle="tab">1</a></li>
          <li><a href="#page-2" data-toggle="tab">2</a></li> 
          <li><a href="#page-3" data-toggle="tab">3</a></li> 
        </ul>
    </div>

    <div class="tab-content" id="my-panes">

        <div class="tab-pane" id="page-1">
            tab 1
        </div>  

        <div class="tab-pane" id="page-2">
            tab 2
        </div> 

        <div class="tab-pane" id="page-3">
            tab 3
        </div> 

    </div>

Here is my additional CSS:

#my-tabs.nav-tabs > li {
    display: inline-block;
    float: none;
}


#my-tabs.nav-tabs > li > a {
    padding: 8px 16px;
    margin:0;
}

Here is the jsfiddle demo: http://jsfiddle.net/edAVC/5/

There is space between tabs. I am puzzled by this. Spend a few hours and unable to figure out why it is there. I want to remove the space between tabs.

Please note that I have to use display: inline-block for <li> element for other reasons.

Let's assume no changes to my css and HTML. What additional CSS I can add to remove the space between tabs?

Thanks and regards!

Upvotes: 1

Views: 6233

Answers (2)

stacey.mosier
stacey.mosier

Reputation: 413

It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. -Source

According to this post your options are:

  • Set a negative margin to remove the inline space
  • Set font-size 0 on the ul, with a few issues documented
  • or just use a float instead of display inline-block anyway

Upvotes: 3

Darren
Darren

Reputation: 13128

There's a margin right being set in bootstrap-combined.min.css.

Try this

#my-tabs.nav-tabs > li > a {
    padding: 8px 16px;
    margin:0;
    margin-right: -4px;
}

JSFiddle

Upvotes: 5

Related Questions