문제

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