Align lists of different sizes in the div in Bootstrap

Navigation
1

I have some lists that are fed through a query to the database, that is, the amount that will show is uncertain, however I limit to show up to 5 records per category.

How are you?

Alistisoccupyingthe"space" of the other and so I want to break into rows, basically like this:

Mycode:

<divclass="col-md-12 main-content">
<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="box">
            <h3 class="box-title">Categoria</h3>
            <ul class="box-list">
                <li><a href="#">Lorem Ipsum</a></li>
            </ul>
            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="box">
            <h3 class="box-title">Categoria</h3>
            <ul class="box-list">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
            </ul>
            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="box">
            <h3 class="box-title">Categoria</h3>
            <ul class="box-list">
                <li><a href="#">Lorem Ipsum</a></li>
            </ul>
            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="box">
            <h3 class="box-title">Categoria</h3>
            <ul class="box-list">
                <li><a href="#">Lorem Ipsum</a></li>
                <li><a href="#">Lorem Ipsum</a></li>
            </ul>
            <a class="read-more" href="http://192.168.31.50/faq/view/teste-de-envio-para-web">Ver Todos <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="box">
            <h3 class="box-title">Categoria</h3>
            <ul class="box-list">
                <li><a href="#">Lorem Ipsum</a></li>
            </ul>
            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
        </div>
    </div>
</div>

How can I do this?

    
asked by anonymous 03.08.2018 / 14:51

1 answer

1

You can handle the .row that lists are in with display:flex and flex-wrap so you prevent the lists from being "encaved" and throw content that does not fit into the "bottom line"

To better understand how it looks, see the snippet below (also display in "All Page" to see the result) 

.listas {
    display: flex;
    flex-wrap: wrap
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    
        <div class="col-md-12 main-content">
                <div class="row listas">
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="box">
                            <h3 class="box-title">Categoria</h3>
                            <ul class="box-list">
                                <li><a href="#">Lorem Ipsum</a></li>
                            </ul>
                            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="box">
                            <h3 class="box-title">Categoria</h3>
                            <ul class="box-list">
                                <li><a href="#">Lorem Ipsum</a></li>
                                <li><a href="#">Lorem Ipsum</a></li>
                                <li><a href="#">Lorem Ipsum</a></li>
                                <li><a href="#">Lorem Ipsum</a></li>
                                <li><a href="#">Lorem Ipsum</a></li>
                            </ul>
                            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="box">
                            <h3 class="box-title">Categoria</h3>
                            <ul class="box-list">
                                <li><a href="#">Lorem Ipsum</a></li>
                            </ul>
                            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="box">
                            <h3 class="box-title">Categoria</h3>
                            <ul class="box-list">
                                <li><a href="#">Lorem Ipsum</a></li>
                                <li><a href="#">Lorem Ipsum</a></li>
                            </ul>
                            <a class="read-more" href="http://192.168.31.50/faq/view/teste-de-envio-para-web">Ver Todos <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="box">
                            <h3 class="box-title">Categoria</h3>
                            <ul class="box-list">
                                <li><a href="#">Lorem Ipsum</a></li>
                            </ul>
                            <a class="read-more" href="#">Ver Todos <i class="fa fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
    
03.08.2018 / 15:02
Parameters for query in query in sql server Problems importing data with Microsoft Excel Input