Geek asks and answers

CSS - Bootstrap: below 767px it scans 2 spans (or more) per line instead of 1

is there a default method with Bootstrap or how can I edit to do this below 767px (mobile), each of which is inside the line, does not become 100%? I just want them to go 50% ... to have, for example, 2 spans side by side, and not one below the other.

early

+5
source share
3 answers

I know this question is old, but I stumbled upon it, looking for a solution to the same problem, and then I realized. I thought I should post my decision if someone else finds this page.

, Bootstrap ( span3) ( span4). , , 767px. , - span12:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
        </ul>
    </div>
  </div>

, , - span12:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span4"></li>
            <li class="span4"></li>
            <li class="span4"></li>
        </ul>
    </div>
</div>

Bootstrap . CSS, , 767px:

@media screen and (max-width: 767px) {
/* remove clear from each ul to stop them from breaking into rows */
ul.thumbnails::after {
    clear: none;
}

/* make the width of each span equal to 47% instead of 100%.
You could make it closer to 50% if you have no borders or padding etc. */
ul.thumbnails li[class*="span"]{
    width: 47%; 
    float: left;
}
    // select the second span in each row (ul) on the 3 column page
[class*="span"] .span4:nth-child(2),
    // select the first span in the even rows on the 3 column page
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1),
    // select the even spans in each row on the 4 column page
[class*="span"] .span3:nth-child(even)
{
    float: right; //float them all to the right
}
}

, . , , , . , . , -!

[] , , -... , , . - .

CSS: http://jsfiddle.net/rUCgS/4/

+3

.row-fluid [class*="span"] @media (max-width: 767px) { ... } , max-width: 480px. .span-control , , .

this

!important jsfiddle, .

+1

Try a line-liquid instead of a line with two span6.

HTML:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' />
<div id='wrap' class='container'>
        <div id='row1' class='row-fluid'>
            <div id='box1' class='span6'>
               box1
            </div>
             <div id='box2' class='span6'>
                 box2
                </div>
        </div>
</div>

CSS

#wrap{
    background-color:black;
    height:50px;
}
#box1{
        background-color:green;
}

#box2{
        background-color:red;
}

here jsFiddle

0
source

More articles:


All Articles