Question

我是Web应用程序开发的初学者，我正在尝试使用Bootstrap框架来创建网页。在我的流星测试项目中，我有两个模板。一个是navTest.html，另一个是columnTest.html。两个模板都使用引导类来设置元素的样式。但是，columnTest模板没有创建3个相等宽度的列，我已经编写了代码。 navTest模板正常工作，因为它使用引导类创建导航栏。我的问题是为什么bootstrap代码在一个模板中工作而在其他模板中不工作。看来我正在做错事，我正在寻求帮助。要添加bootstrap包，我使用了以下命令：

meteor add bootstrap

这是columnTest.html的代码

<template name="columnTest">    
    <div class="row">
        <div class="col-4">
            <h3>Column 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-4">
            <h3>Column 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="col-4">
            <h3>Column 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
    </div>
</template>

这是navTest.html的代码

<template name="navTest">
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</template>

这里是我使用这些模板的html文件的代码：

<head>
<title>Test</title>
</head>

<div class="container">
    {{> columnTest}}
</div>
<div class="container">
    {{> navTest}}  
</div>
</body>

以下是结果网页的外观： enter image description here

为什么Bootstrap代码创建三列不起作用？

0 个答案: