Question

我有一个简单的bootstrap html页面如下：

<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>

当我们在浏览器中查看页面时，列表与文本重叠，并且不会正确显示。这里出了什么问题？

Answer 1

也许起初你应该使用

<div class="row">

嵌套列如下：

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

你只是缺少行类

因此，您的HTML将如下所示：

<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>

Html bootstrap list-group项错误

1 个答案: