Bootstrap布局未按预期进行

Question

我使用bootstrap和ROR开发了一个页面。

在本地桌面上运行时，它工作正常，正如预期和满意，我将它部署到heroku。

当我检查页面时，它显示奇怪的行为，即最后一列被移动到下一行。

网站页面如下： Veggies4all.org

我已经检查了所有样式表/ html和ERB文件的重新检查是否有任何差异，但找不到。

请建议

更新 生成的<div class="container">如下

<div class = "row">
    <div class="col-md-3">
        <div class = "panel panel-default">
            <div class = "panel-heading">
                Ingredients
            </div>
            <div class = "panel-body">
                <ul>
                    <li>
                        Butter
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class = "panel panel-default">
            <div class = "panel-heading">
                Method
            </div>
            <div class = "panel-body">
                <p>
                    <li>Please have patience</li>
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class = "panel panel-default">
            <div class = "panel-heading">
                Related Categories
            </div>
            <div class = "panel-body">
                <ul>
                    <li>
                        Lunch
                    </li>
                    <li>
                        Main Course
                    </li>
                    <li>
                        Breakfast
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

当我在localhost上检查它时，输出如下

当我在heroku上尝试时，输出如下 - 你也可以在Veggies4all.org

上引用它

我尝试在codelab和codeply上运行它来检查有效性，并且在那里工作正常......

还有什么我想念的吗？

Answer 1

col-md-6中格式错误的HTML导致了问题。 li不应该是p的孩子。在fb-comments之后还有一个额外的结束</p>。

<div class="col-md-6">
        <div class = "panel panel-default">
        <div class = "panel-heading">
            Method
        </div>
        <div class = "panel-body">
            <p><li>Please have patience</li></p>
        </div>  
        </div>
        <div class="fb-comments" data-href="http://veggies4all.org/recipes/Coming Soon data-numposts="5" data-width="100%"></div></p>

</div>