CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Liondancer
Liondancer

Reputation: 16469

Twitter bootstrap togglable tabs length and spacing

I am using twitter bootstrap to make Togglable tabs.(http://getbootstrap.com/javascript/#tabs) I was wondering how I can make the tabs reach the whole length of the div evenly instead of stopping prematurely and leaving a line. Also, how would I make the tabs evenly spaced?

enter image description here

html:

<body class="wrap">

    <div id="configNav">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#windowsXP_tab" role="tab" data-toggle="tab">XP</a></li>
          <li><a href="#windows7_tab" role="tab" data-toggle="tab">7</a></li>
          <li><a href="#windows8_tab" role="tab" data-toggle="tab">8</a></li>
          <li><a href="#windows8_1_tab" role="tab" data-toggle="tab">8.1</a></li>
          <li><a href="#OSX10_6_tab" role="tab" data-toggle="tab">10.6</a></li>
          <li><a href="#OSX10_8_tab" role="tab" data-toggle="tab">10.8</a></li>
          <li><a href="#OSX10_9_tab" role="tab" data-toggle="tab">10.9</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="windowsXP_tab">windows XP</div>
          <div class="tab-pane" id="windows7_tab">windows 7</div>
          <div class="tab-pane" id="windows8_tab">windows 8</div>
          <div class="tab-pane" id="windows8_1_tab">windows 8.1</div>
          <div class="tab-pane" id="OSX10_6_tab">osx 10.6</div>
          <div class="tab-pane" id="OSX10_8_tab">osx 10.8</div>
          <div class="tab-pane" id="OSX10_9_tab">osx 10.9</div>
        </div>
    </div>

CSS:

.wrap {
   width: 1200px;
   margin:0 auto;

}
.left_col {
   float:left;
   width:300px;
}
.right_col {
   float:right;
   width:300px;
}

#configNav {
    width: 600px;
    margin: 0 auto;
}

Upvotes: 0

Views: 100

Answers (1)

dtyler
dtyler

Reputation: 1428

What i've been able to do before is use display: table and display: table-cell on the items to spread out any UL horizontally.

I've seen compatibility issues on some IE < 9

#configNav > ul {
    display: table;
    width: 100%;
    table-layout: fixed;
    }

#configNav > ul > li {
    display: table-cell;
    float: none;
    }

/* Override bootstrap styles */
#configNav > ul:before,
#configNav > ul:after {
    display: none;
    }

Upvotes: 1

Related Questions