Html bootstrap list-group item error

StackOverflow https://stackoverflow.com/questions/23640222

  •  21-07-2023
  •  | 
  •  

Pergunta

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?

Foi útil?

Solução

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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top