简体   繁体   English

我的引导网格系统不起作用

[英]My bootstrap grid system not working

I had problem to apply my bootstrap gird system into the web-page. 我在将引导网系统应用到网页时遇到问题。 The bootstrap I applied is bootstrap 3.3.5, downloaded it from the getbootstrap.com . 我应用的引导程序是bootstrap 3.3.5,它是从getbootstrap.com下载的。 And I had all the config things done, here is my project files directory: 我已完成所有配置工作,这是我的项目文件目录:

文件目录

And here is my index.html structure: 这是我的index.html结构:

<html>
<head>
    <title>My bootstrap</title>

    <meta charset="utf-8”>
    <meta name="viewport” content="width=‘device-width’,inital-scale=1.0”>

    <link href="css/bootstrap.min.css” rel="stylesheet”>
    <link href="css/custom.css” rel="stylesheet”>

    <script src="/js/respond.min.js”></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <p>text</p>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <p>text</p>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <p>text</p>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <p>text</p>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </div>
</body>
</html>

However the grid system not working when the browser size changed, it's always stay the original style as the 4 divs layout in vertical. 但是,当浏览器大小更改时,网格系统不起作用,它始终保持原始样式,因为垂直放置4 divs布局。 Am I doing something wrong? 难道我做错了什么?

Well, finally I found it's the punctuation that cause the problem! 好吧,最后我发现是导致问题的标点符号! I should be more careful, and there're many things we should pay attention to it,like : 我应该更加小心,我们有很多事情要注意,例如:

① The order of the jquery and the bootstrap css script to state. ①陈述jquerybootstrap css脚本的顺序

② You should know a row is equal 12 columns,so don't abuse you row class. ②您应该知道一行等于12列,所以不要滥用行类。

③ Sometimes you should check you chrome extenssions ,it's maybe prohibit you load your local .js file. ③有时您应该检查chrome 扩展名 ,这可能是禁止您加载本地.js文件的原因。

④ Anyway more careful more better. ④反正越小心越好。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM