Bootstrap 3 form-horizo​​ntal不能与bootstrapWizard一起使用

Question

对不起，这可能是个愚蠢的问题。

我正在尝试在Meteor中将bootstrap 3与twitter bootstrap向导混合使用：

<template name="bootstrapWizard">
    <div id="rootwizard" class="tabbable tabs-left col-sm-6">
        <ul>
            <li><a href="#tab1" data-toggle="tab">First</a></li>
            <li><a href="#tab2" data-toggle="tab">Second</a></li>
            <li><a href="#tab3" data-toggle="tab">Third</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="email">Email:</label>
                        <div class="col-sm-4">
                            <input type="email" class="form-control" id="email" placeholder="Enter email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="pwd">Password:</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                        </div>
                    </div>                  
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="tab-pane" id="tab2">
                2
            </div>
            <div class="tab-pane" id="tab3">
                3
            </div>
            <ul class="pager wizard">
                <li class="previous first" style="display:none;"><a href="#">First</a></li>
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next last" style="display:none;"><a href="#">Last</a></li>
                <li class="next"><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
</template>

列（或网格（？））不能正常工作。如果我将class="form-horizontal"取出，行确实会接近，但不会如何。

我对这个CSS和bootstrap的东西真的很陌生，但我已经在stackoverflow上闲逛几分钟而且找不到类似的情况。

想知道是否有任何我应该使用的bootstrap CSS类......

*参考：bootstrap wizard和twbs:bootstrap 3.3.5

修改：当前外观：

预期：