Clever Geek Handbook

Bootstrap: dynamic columns with liquid for containers and a string that don't wrap properly

Here's what I see now:

http://arsenalist.com/f/embed/index.html

Note that the second line is not wrapping properly. The code looks like this:

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-2 bit clearfix">
            <div class="clearfix">
                <div class="image-preview">
                    <a href=""><img src="" class="img-rounded img-responsive"/></a>
                </div>
                <h6><a href="">Some text</a></h6>
            </div>
        </div>
    </div>
    .... repeat ....
</div>

Any idea why the packaging is wrong?

+3


source to share


2 answers


OK, I figured it out. It's more of an RTFM thing with responsive column dropping . Basically you can only use one <div class="row">

and put all columns in it (even if they appear on different rows) as long as you set the correct position correctly, for example <div class="clearfix visible-xs-block"></div>

. So in the example below I am showing two columns in XS viewports, 6 columns in large and medium viewports, and 4 columns in small view ports.



<div class="container-fluid">
<div class="row">
{% for b in bits %}
    <div class="col-xs-6 col-md-2 col-lg-2 col-sm-3 bit">
        <h6><a target="_top" href="{{b.link}}">{{b.description}} </a></h6>
    </div>
    {% if loop.index is divisibleby 2 %}
        <div class="clearfix visible-xs-block"></div>
    {% endif %}
    {% if loop.index is divisibleby 4 %}
        <div class="clearfix visible-sm-block"></div>
    {% endif %}
   {% if loop.index is divisibleby 6 %}
        <div class="clearfix visible-md-block"></div>
        <div class="clearfix visible-lg-block"></div>
    {% endif %}
{% endfor %}
</div>
+7


source


when you say col-md-2 it means it spans 2 columns out of 12 .. so you need 6 of these divs inside each row ... and after each row .. you can use a clearfix div if you want



   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>

    <body>
        <div class="container-fluid">

            <div class="col-md-2 bit">
                <div class="image-preview">
                    <a href=""><img class="img-rounded img-responsive" src=""></a>
                </div>
                <h6><a href="">Some text</a></h6>
            </div>



        </div>
    </body>
    </html>
0


source






More articles:


All Articles