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