Geek asks and answers

5 equal spaces in 1 line - Twitter Bootstrap

Using the layout of the fluid, I can get 4 equal intervals:

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

Or I can get 6 equal intervals:

<div class="row-fluid">
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
</div>

But how do I get 5 equal intervals?

+5
source share
8 answers

Given that bootstrap is 12 columns by default, you cannot mathematically get 5 equal intervals.

However, if you really need to (a bad idea, more about that per second), you can configure the loading of the boot file to have 15 columns.

http://twitter.github.com/bootstrap/customize.html

Change the variable @gridColumnsto 15, then use 5 columns with a value span3.

. Bootstrap - 12 , 12 . 12 1/4, 1/3 1/2. 15 1/3- ( ). , , .

+3

. HTML :

<div class="row-fluid-5">
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
    <div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>

, bootstrap.css bootstrap-responsive.css, custom.css :

/* CUSTOM 5 COLUMN SPAN LAYOUT
  *
  * based on http://gridcalculator.dk/
  * width => 1200, gutter => 15px, margin => 15px, columns => 5
  */
 .row-fluid-5 {
   width: 100%;
   *zoom: 1;
 }
 .row-fluid-5:before,
 .row-fluid-5:after {
   display: table;
   line-height: 0;
   content: "";
 }
 .row-fluid-5:after {
   clear: both;
 }
 .row-fluid-5 [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 1.875%;
   *margin-left: 1.875%;

   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }

 .row-fluid-5 .controls-row [class*="span"] + [class*="span"] {

   margin-left: 1.875%;
 }
 .row-fluid-5 [class*="span"]:first-child{
    margin-left: 0;
 }
 .row-fluid-5 .span2 {
   width: 18.5%;
   *width: 18.5%;
 }

 /* responsive ONLY */

 @media (max-width: 600px){ /* spans reduce to 100px then go full width */

    .row-fluid-5 [class*="span"]{
    margin-left: 0;
    float: left;
    width: 100%;
    padding: 10px; 
    }
 }

, , .

DEMO

+14

(, 10). 5 12 .

+1

css ( bootstrap.css). . "15" , , 1/5th.

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

, .

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
+1

, . CSS/Bootstrap...

5 , Bootstrap 12 12 / 5 = 2.4.

0

10/2 = 5, span10, , span2. :

<div class="container-fluid">
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
    <div class="row-fluid span10">
            <div class="row-fluid">
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
                <div class="span2">...</div>
            </div>
    </div>
</div> <!-- /container -->
0
.span3 {   width: 220px; }
.span2 {   width: 140px; }


.row-fluid .span3 {   width: 23.404255319148934%;   *width:
23.351063829787233%; }

.row-fluid .span2 {   width: 14.893617021276595%;   *width:
14.840425531914894%; }

, ,

class="span" style="width:180px"


class="span" style="width:19.1488%"

You need to add the span bootstrap class that you need for .row.

0
source

Why not just use tables. This is what I use and is responsive.

<div class="row-fluid">
  <div class="span12">
     <table class="table">
     <tbody>
     <tr>
        <td width="20%">1</td>
        <td width="20%">2</td>
        <td width="20%">3</td>
        <td width="20%">4</td>
        <td width="20%">5</td>
    </tr>
    </tbody>
    </table>

 </div>
</div>
-3
source

More articles:


All Articles