Bootstrap divs崩溃到另一个div?

时间:2016-04-07 19:21:31

标签: html css twitter-bootstrap

Hello Stackoverflow用户,

我正在创建一个网站并且开始进展顺利,直到我谈到我将稍微解释一下,我已经尝试并查看我的代码几个小时和Google以及各种各样的事情但是找不到与我的问题相似的东西。 Here's an image of how the webpages currently look, the first obviously medium/large, the middle size small and the last one is extra small

所以,正如你可以从图像中看出出错的地方,我预计div不会被正确关闭或者其他什么,但我在代码中找不到类似的东西!这是我的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <base href="/duo-uniek/" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Home: Welkom - Duo-Uniek.nl</title>
        <script src="javascript/jQuery.min.js"></script>
        <script src="javascript/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script type="text/javascript" src="Javascript/banner.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link id="stylesheet" href="css/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="fluid-container">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-horizontal border-bottom header">
                <div class="list-group list-inline list-unstyled text-center">
                    <span class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4 active">Home</span>
                    <a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/media.html">Media</a>
                    <a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/info.html">Info</a>
                    <a class="list-group-item col-xs-3 col-sm-2 col-md-1 col-sm-push-2 col-md-push-4" href="page/contact.html">Contact</a>
                </div>
            </div>
            <div class="row-fluid col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding">
                <div class="banner hidden-xs hidden-sm col-md-12 border-bottom no-padding styling" style="height: 500px;">
                    <div class="innerBanner col-md-12">

                    </div>
                </div>
                <div class="banner visible-sm-block col-sm-12 border-bottom no-padding styling" style="height: 350px;">
                    <div class="innerBanner col-sm-12">

                    </div>
                </div>
                <div class="banner visible-xs-block col-xs-12 border-bottom no-padding styling" style="height: 200px;">
                    <div class="innerBanner col-xs-12">

                    </div>
                </div>
            </div>
            <div class="col-sx-12 col-sm-12 col-md-12 col-lg-12 text-center padding-horizontal   border-bottom styling">
                <div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
                    <div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
                        <p>Test</p>
                    </div>
                </div>
                <div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
                    <div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
                        <p>Test</p>
                    </div>
                </div>
                <div class="col-sx-12 col-sm-4 col-md-2 col-md-push-3 padding-horizontal" style="background-color: black;">
                    <div class="col-sx-12 col-sm-12 col-md-12" style="background-color: white;">
                        <p>Test</p>
                    </div>
                </div>
            </div>
            <div style="background-color: orange;">
                <p>Home</p>
            </div>
        </div>
    </body>
</html>

此代码来自显示页面来源&#39;因为我的代码主要由PHP生成,但除非我真的很蠢,否则我检查了所有内容,没有任何错误。我真的不知道该怎么做,我尝试过的所有东西都没有帮助,我真的必须把它修好......我希望有人在这里!

祝你好运, 杰西

1 个答案:

答案 0 :(得分:0)

您有一个错字col-sx-12应该是col-xs-12