Twitter bootstrap 为什么创建三列的引导代码不起作用？_Twitter Bootstrap_Meteor

Twitter bootstrap 为什么创建三列的引导代码不起作用？

twitter-bootstrap meteor

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

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

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>


第1栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第2栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验
第3栏
我爱你，我爱你，我爱你
但是，我们必须尽可能少地进行实验

下面是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>


测验


{{>列测试}
{{>navTest}

以下是生成的网页的外观：

类

col-4

是错误的，它应该类似于

col-xs-4

我用col-sm-4代替col-4，结果仍然没有变化。不要添加

bootstrap

包，它将添加bootstrap 2，改为使用meteor add twbs:bootstrap获取最新的bootstrap 3。在我用twbs:bootstrap替换了bootstrap包之后，我面临的问题得到了解决。谢谢@saimeunt的帮助。

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