为什么添加 @Scripts.Render("") 会改变我的 html 布局？答案

【问题标题】：Why does adding a @Scripts.Render("") alter my html layout?为什么添加 @Scripts.Render("") 会改变我的 html 布局？
【发布时间】：2013-07-11 08:32:53
【问题描述】：

今天遇到了这个“有趣”的问题。我有一个 asp.net mvc 应用程序，带有一个 twitter 引导设计模板，到目前为止它一直运行良好。但是，当我在视图顶部添加一些 @Scripts.Render("...") 语句（不是共享布局文件，而是视图）时，它似乎改变了我的布局！

查看：

@Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
@Scripts.Render("~/signalr/hubs")
@Scripts.Render("~/Scripts/Stimline/connector.js")

<div class="span12"> 
    <legend>Fleet List</legend>
    <div class="row-fluid">
       ...
    </div>
</div>

每当顶部的三个脚本语句添加到我的 .cshtml 文件时，它似乎会将整个 div 部分移到右侧，以便它与我的浏览器边缘对齐。再次删除语句会使其恢复正常，添加默认情况下从引导程序中应该存在的边距。

我没有对引导 css 做任何更改。

以前有没有人见过这个，或者至少是类似的东西？

下面是 @Render.Scripts 语句的样子：

这里没有它：

如果您使用固定标题栏作为右边缘的参考，您会看到表格在一张图像中一直向右对齐，并且与另一张图像的边缘正确“间隔”。

【问题讨论】：

你用<div class="row">包裹<div class="span12">吗？
是的，在我的 _Layout.cshtml 中，它被包裹在一个容器流体中，然后是一个行流体。
如果可能的话，看看现场演示会很好。
很抱歉，这是不可能的，因为这是一个内部项目：（我还能为您提供什么帮助吗？
问题截图

标签： css asp.net-mvc-4 twitter-bootstrap razor

【解决方案1】：

我最近遇到了一个类似的问题，我是菜单的浮动 li 元素。我在 html 中将每个元素放在它自己的行上，因此在每个项目之间呈现了一个空格。

<ul>
    <li style="float:left">Item 1</li>
    <li style="float:left">Item 2</li>
    <li style="float:left">Item 3</li>
</ul>

改为

<ul>
    <li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>

在您的情况下，将脚本移动到页面底部最好遵循其他最佳做法，但您也可以删除空格以获得相同的结果。

【讨论】：