Вопрос

I have a simple bootstrap html page as follows:

<html>
    <head>
        <title>Student Program Management</title>

        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">

    </head>
    <body>

        <div class="list-group">


            <li class="list-group-item" >
                <div class="col-lg-2 col-md-2 col-sm-2">
                    hi
                </div>
                <div class="col-lg-4 col-md-4 col-sm-3">
                    helllo
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    fbs
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    angular
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    django
                </div>  
            </li>
            <li class="list-group-item" >
                <div class="col-lg-2 col-md-2 col-sm-2">
                    mptt
                </div>
                <div class="col-lg-4 col-md-4 col-sm-3">
                    django
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    bootstrap
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    angular
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    django
                </div>  
            </li>

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

When we look at the page in the browser, the list overlaps with the text and is not displayed right. What is going wrong here?

Это было полезно?

Решение

Maybe at first you shold use

<div class="row"> 

with nested columns as follows:

<div class="row"> 
    <div class="col-lg-2">
    </div>
    ....
</div> 

you are simply missing row class

So your HTML will look like:

<html>
    <head>
        <title>Student Program Management</title>

        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">

    </head>
    <body>

        <div class="list-group">
            <li class="list-group-item" >
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2">
                    hi
                </div>
                <div class="col-lg-4 col-md-4 col-sm-3">
                    helllo
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    fbs
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    angular
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    django
                </div>  
                </div>
            </li>
            <li class="list-group-item" >
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2">
                    mptt
                </div>
                <div class="col-lg-4 col-md-4 col-sm-3">
                    django
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    bootstrap
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2">
                    angular
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    django
                </div>  
                </div>
            </li>

        </div>
    </body>
</html>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top