Geek Answers Handbook

Bootstrap 2.3 fluid spacing

I am trying to create a line of divs (one per day of the week), each of which contains a set of buttons for user accessibility for this time interval. However, no matter what I try, I cannot get the Bootstrap grid to distribute evenly. Since seven days, I can’t evenly divide the 12-space gap, so each div span1. However, in Bootstrap docs, they show this uniform filling of available space. In my example, it always groups divs to the left, so everything gets crowded, rather than taking up available space.

I have a fiddle here: http://jsfiddle.net/usrwvreL/

Can someone point out the correct way to use a grid / liquid string to properly place these elements?

+4
source share
5 answers

Bootstrap uses a 12-cell system, so if you need to split by seven, you can add your own mesh split,

so you can make a type selector .col-seventh{width: calc (100% / 7)}

so you can create a new mesh type:

 .col-seventh-1{width: 14.285714%;}
 .col-seventh-2{width: 28.571428%;}
 .col-seventh-3{width: 42.857142%;}
 .col-seventh-4{width: 57.142857%;}
 .col-seventh-5{width: 71.428571%;}
 .col-seventh-6{width: 85.714285%;}
 .col-seventh-7{width: 100%;}

Instead, you can also use the flexboxes css3 layout (non-bootstrap) property to do it all for you!

0
source

, - . 4, .

. .col-size-offset-4, .col-size-4.

, 4.

<!--This is the parent row-->
<div class="row">

    <!--This is a parent column-->
    <div class="col-md-4">

        <!--Here is the gold. Create nested rows-->
        <div class="row">

            <!--Here we are offseting this column to produce a centered effect-->
            <div class="col-md-offset-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

    <!--The middle parent column-->
    <div class="col-md-4">

        <div class="row">

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

    <!--The last parent column, farthest to the right
    <div class="col-md-4">

        <div class="row">

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

            <div class="col-md-4">

            </div>

        </div>

    </div>

</div>
0

, . btn 6 .

0

. , . , , .

0
source

Why can't you do this?

<div class="container-fluid">
     <div class="span1 avail-buttons"><span class="avail-date text-center">2015-02-11</span>
    <div class="button-row row-fluid">       
            <button data-slot="0" type="button" class="avail-button btn btn-danger">08:45 AM</button>
            <button data-slot="1" type="button" class="avail-button btn btn-danger">09:15 AM</button>
            <button data-slot="2" type="button" class="avail-button btn btn-danger">09:45 AM</button>
            <button data-slot="3" type="button" class="avail-button btn btn-danger">10:15 AM</button>
            <button data-slot="4" type="button" class="avail-button btn btn-danger">10:45 AM</button>
            <button data-slot="5" type="button" class="avail-button btn btn-danger">11:15 AM</button>
        </div> </div></div>
0
source

More articles:


All Articles