为什么我的 html 页面在独立后无法呈现相同的页面？

Question

我有一个网页 (Web API/ASP.NET)，看起来和我想要的一样：

这是生成它的代码：

@model WebAppRptScheduler.Models.HomeModel
@using System.Data
@{
    ViewBag.Title = "PRO*ACT eServices Reporting";

    DataTable dtUnits = Model.Units;
    var units = from x in dtUnits.AsEnumerable()
                select new
                {
                    unit = x.Field<string>("unit")
                };

    DataTable dtReports = Model.Reports;
    var reports = from x in dtReports.AsEnumerable()
                  select new
                  {
                      report = x.Field<string>("ReportName").ToUpper()
                  };

    List<String> daysOfMonth = Model.DaysOfMonth;
    List<String> ordinalWeeksOfMonth = Model.OrdinalWeek;
    List<String> daysOfWeek = Model.DaysOfWeek;
    List<String> patternFrequency = Model.PatternFrequency;

    int maxMonthsBackBegin = Model.maxMonthsBackForReportBegin;
    int maxMonthsBackEndNormal = Model.maxMonthsBackForReportEndNormal;
    int maxMonthsBackEndFillRate = Model.maxMonthsBackForReportEndFillRate;
    int maxDaysBackForDeliveryPerformance = Model.maxDaysBackForDeliveryPerformanceReport;
}

@* row 1: "Report Scheduler" *@
<div class="jumbotronjr">
    <div class="col-md-3">
        <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
        @*<img src="~/Content/Images/proactLogoWithVerbiage.png" alt="PRO*ACT usa puny logo">*@
        @*<img src="~/Content/Images/proactLogoWithVerbiage.png" height="160" width="200" alt="PRO*ACT usa puny logo">*@
        </div>
    <div class="col-md-9">
        <label class="titletext">eServices Reporting</label>
    </div>
</div>

@* row 2: HR *@
<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

@* row 3: "Select Distributors, -Categories, -Report Date Range" *@
<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Distributors</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="unitsselect" name="unitsselect">
                <option disabled selected value="-1">Please choose a Distributor</option>
                <option>All Distributors</option>
                <option>FSA Loveland</option>
                <option>Hearn Kirkwood</option>
                <option>Paragon</option>
                <option>Piazza</option>
                <option>ProduceOne Cleveland</option>
            </select>
        </div>
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Categories</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="categoriesselect" name="categoriesselect">
                <option disabled selected value="-1">Please choose Categories</option>
                <option>All Categories</option>
                <option>Fruits</option>
                <option>Vegetables</option>
                <option>Herbs</option>
            </select>
        </div>
    </div>
    <div class="col-md-5 addltopmargin">
        <label class="sectiontext">Report Date Range</label>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom1" name="daterangefrom1">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto1" name="daterangeto1">
            </input>
        </div>
    </div>
</div>

@* row 4: "Select Classes, Comparative Date Range" *@
<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Classes</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="customersselect" name="customersselect">
                <option disabled selected value="-1">Please choose Classes</option>
                <option>All Classes</option>
                <option>Apples</option>
                <option>Asparagus</option>
                <option>Avocados</option>
                <option>Bananas</option>
                <option>Beans</option>
                <option>Berries</option>
                <option>Broccoli</option>
                <option>Cabbage</option>
                <option>Carrots</option>
                <option>Celery</option>
                <option>Cilantro</option>
                <option>Cucumbers</option>
                <option>Garlic</option>
                <option>Grapes</option>
                <option>Lettuce</option>
                <option>Peppers</option>
                <option>Potatoes</option>
            </select>
        </div>
    </div>
    <div class="col-md-5 addltopmargin">
        <label class="sectiontext">Comparative Date Range</label>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
        </div>
    </div>
</div>

@* row 5: "Select Items, Summary and Detail checkboxes, Submit button"  *@
<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Items</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="itemssselect" name="itemssselect">
                <option disabled selected value="-1">Please choose Items</option>
                <option>All Items</option>
                <option>APPLES, FUJI 12/3#</option>
                <option>APPLES, GRANNY SMITH 20 CT</option>
                <option>ASPARAGUS, LARGE 11/1#</option>
                <option>AVOCADOS, HASS 48 #1</option>
                <option>BANANAS, 10#</option>
                <option>BEANS, GREEN TRIM 2/5# (BAGS)</option>
                <option>BERRIES, BLACK 1/6 OZ</option>
                <option>BERRIES, BLUE 1/6 OZ</option>
                <option>BERRIES, RASPBERRY 3/6 OZ</option>
                <option>BERRIES, STRAWBERRY 1# CLAM</option>
                <option>BROCCOLI, 14 CT</option>
                <option>BRUSSEL SPROUTS, 25#</option>
                <option>CABBAGE, GREEN 5#</option>
                <option>CABBAGE, RED 5#</option>
                <option>CELERY, 24 CT</option>
                <option>CILANTRO, ICELESS 1/6 CT</option>
                <option>CUCUMBERS, SELECT 5#</option>
                <option>GARLIC, PEELED 1/5# BAG</option>
                <option>GRAPES, RED SEEDLESS 5#</option>
                <option>HERBS, ARUGULA 1#</option>
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <br/>
        <br />
        <input type="checkbox" name="summary" value="summary"> Summary
        <input type="checkbox" name="detail" value="detail"> Detail
    </div>
    <div class="col-md-3">
        <br />
        <button class="btn btn-primary green marginaboveandbelow" style="padding: 6px 50px 6px 50px; margin-left: -24px;" id="btnGetData" name="btnGetData">SUBMIT</button>
    </div>
</div>

@* row 6: HR *@
<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

@* row 7: Copy, Excel, CSV, and PDF buttons; Search label and input text  *@
<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-6">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1 ">
        <label style="display: inline-block; margin-top: 2px">Search:</label> 
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-left: -1cm; margin-right: 2cm;" name="searchinput">
    </div>
</div>

@* row 8: HR *@
<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

@* row 9: HTML Table with fake summary data *@
<div class="row">
    <div class="col-md-12">
        <table>
            <tr>
                <th>Distributor</th>
                <th>Packages</th>
                <th>Price</th>
                <th>Percentage of Total</th>
            <tr>
                <td>FSA Loveland</td>
                <td>1.0</td>
                <td>30.74</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Hearn Kirkwood</td>
                <td>10.0</td>
                <td>309.49</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Paragon</td>
                <td>100.0</td>
                <td>3000.27</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Piazza</td>
                <td>1000.0</td>
                <td>30012.62</td>
                <td>28</td>
            </tr>
            <tr>
                <td>ProduceOne Cleveland</td>
                <td>10000.0</td>
                <td>309871.18</td>
                <td>42</td>
            </tr>
        </table>
    </div>
</div>

我想将其作为文件发送 (bla.html)，因此我创建了以下内容，它通过 CDN 使用 Bootstrap，并添加了自定义 CSS 类在样式部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>eServices Reporting - Summary Data</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
.jumbotronjr {
  padding: 12px;
  margin-bottom: -16px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: white;
}
.titletext {
    font-size: 2.8em;
    color: darkgreen;
    font-family: Candara, Calibri, Cambria, serif;
    margin-left: -32px;
}
.addltopmargin {
    margin-top: 8px;
}
.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
}
.bottommarginbreathingroom {
    margin-bottom: 2px;
}
.marginaboveandbelow {
    margin-top: 15px;
    margin-bottom: 15px;
}
.btn.green{
    background-color: darkgreen;
    color: white;
}
.squishedbutton {
  margin-left: 0cm;
  margin-right: -0.1cm;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
</style>
</head>

<body>

<div class="jumbotronjr">
    <div class="col-md-3">
        <img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
        </div>
    <div class="col-md-9">
        <label class="titletext">eServices Reporting</label>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Distributors</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="unitsselect" name="unitsselect">
                <option disabled selected value="-1">Please choose a Distributor</option>
                <option>All Distributors</option>
                <option>FSA Loveland</option>
                <option>Hearn Kirkwood</option>
                <option>Paragon</option>
                <option>Piazza</option>
                <option>ProduceOne Cleveland</option>
            </select>
        </div>
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Categories</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="categoriesselect" name="categoriesselect">
                <option disabled selected value="-1">Please choose Categories</option>
                <option>All Categories</option>
                <option>Fruits</option>
                <option>Vegetables</option>
                <option>Herbs</option>
            </select>
        </div>
    </div>
    <div class="col-md-5 addltopmargin">
        <label class="sectiontext">Report Date Range</label>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom1" name="daterangefrom1">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto1" name="daterangeto1">
            </input>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Classes</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="customersselect" name="customersselect">
                <option disabled selected value="-1">Please choose Classes</option>
                <option>All Classes</option>
                <option>Apples</option>
                <option>Asparagus</option>
                <option>Avocados</option>
                <option>Bananas</option>
                <option>Beans</option>
                <option>Berries</option>
                <option>Broccoli</option>
                <option>Cabbage</option>
                <option>Carrots</option>
                <option>Celery</option>
                <option>Cilantro</option>
                <option>Cucumbers</option>
                <option>Garlic</option>
                <option>Grapes</option>
                <option>Lettuce</option>
                <option>Peppers</option>
                <option>Potatoes</option>
            </select>
        </div>
    </div>
    <div class="col-md-5 addltopmargin">
        <label class="sectiontext">Comparative Date Range</label>
        <div>
            <input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
            </input>
            <label> to </label>
            <input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
            </input>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-3 addltopmargin">
        <label class="sectiontext">Select Items</label>
        <div>
            <select class="dropdown bottommarginbreathingroom" id="itemssselect" name="itemssselect">
                <option disabled selected value="-1">Please choose Items</option>
                <option>All Items</option>
                <option>APPLES, FUJI 12/3#</option>
                <option>APPLES, GRANNY SMITH 20 CT</option>
                <option>ASPARAGUS, LARGE 11/1#</option>
                <option>AVOCADOS, HASS 48 #1</option>
                <option>BANANAS, 10#</option>
                <option>BEANS, GREEN TRIM 2/5# (BAGS)</option>
                <option>BERRIES, BLACK 1/6 OZ</option>
                <option>BERRIES, BLUE 1/6 OZ</option>
                <option>BERRIES, RASPBERRY 3/6 OZ</option>
                <option>BERRIES, STRAWBERRY 1# CLAM</option>
                <option>BROCCOLI, 14 CT</option>
                <option>BRUSSEL SPROUTS, 25#</option>
                <option>CABBAGE, GREEN 5#</option>
                <option>CABBAGE, RED 5#</option>
                <option>CELERY, 24 CT</option>
                <option>CILANTRO, ICELESS 1/6 CT</option>
                <option>CUCUMBERS, SELECT 5#</option>
                <option>GARLIC, PEELED 1/5# BAG</option>
                <option>GRAPES, RED SEEDLESS 5#</option>
                <option>HERBS, ARUGULA 1#</option>
            </select>
        </div>
    </div>
    <div class="col-md-2">
        <br/>
        <br />
        <input type="checkbox" name="summary" value="summary"> Summary
        <input type="checkbox" name="detail" value="detail"> Detail
    </div>
    <div class="col-md-3">
        <br />
        <button class="btn btn-primary green marginaboveandbelow" style="padding: 6px 50px 6px 50px; margin-left: -24px;" id="btnGetData" name="btnGetData">SUBMIT</button>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-6">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="display: inline-block; margin-top: 2px">Search:</label> 
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-left: -1cm; margin-right: 2cm;" name="searchinput">
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <table>
            <tr>
                <th>Distributor</th>
                <th>Packages</th>
                <th>Price</th>
                <th>Percentage of Total</th>
            <tr>
                <td>FSA Loveland</td>
                <td>1.0</td>
                <td>30.74</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Hearn Kirkwood</td>
                <td>10.0</td>
                <td>309.49</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Paragon</td>
                <td>100.0</td>
                <td>3000.27</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Piazza</td>
                <td>1000.0</td>
                <td>30012.62</td>
                <td>28</td>
            </tr>
            <tr>
                <td>ProduceOne Cleveland</td>
                <td>10000.0</td>
                <td>309871.18</td>
                <td>42</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

...但在翻译中丢失了很多内容。它看起来像这样：

所以如你所见，我的边框消失了，HRs 比懒惰男孩的发作性睡病还要微弱，html table 一团糟。

但是为什么，我该如何解决？为什么我的独立 html 页面无法正常呈现，即使我引用了该页面使用的 Bootstrap 类？

更新

感谢 stackingjasoncooper 的评论，我通过添加 CSS:

让 table 看起来更好

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

更新 2

添加这些也有帮助：

hr {
    border: 0;
    height: 1px;
    color: navy;
    background: #333;
}
.body-content {
    -webkit-box-shadow: -1px 0 5px 0 #000000;
    -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
    box-shadow: -1px 0 5px 0 #000000;
    box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
   padding-left: 1px;
   padding-right: 1px;
   padding-bottom: 15px;
}

更新 3

好的，这是我需要添加的最后一件事：_Layout.cshtml 包含在头部部分：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

...正文中的内容：

<div class="container body-content">
    @RenderBody()
</div>

...所以我将第一个添加到头部（不知道是否有必要，但它不会伤害任何东西），div 作为主体部分中的第一个，现在看起来完全一样。

Answer 1

为什么您的独立页面与您的 .NET 页面不匹配
您仍然缺少一些 CSS。例如，Bootstrap 不会在不调用 class 的情况下设置交替的 table 行颜色，而您并没有这样做。交替行颜色也不在您 <head> 的样式中。检查您的 .NET 应用程序的 head 组件或在浏览器中查看该 .NET 页面的源代码并查找其他样式表。

关于您的更新：

视口标记
viewport meta tag 有助于针对不同的屏幕尺寸缩放您的网站，例如 tablets 和手机。使用非常标准的版本，您基本上是在说缩放网站以适合屏幕。

@RenderBody()
我认为这是一个 .NET 控件。我认为它不会对 HTML 页面产生任何影响，因此我认为您不需要它。

Bootstrap太棒了
您正在使用 Bootstrap framework, which has a lot of the CSS styles you're writing already built in. For example, check out the Bootstrap table styles。它们已经完成并且可用；您只需调用 classes。玩得开心！

为什么我的 html 页面在独立后无法呈现相同的页面？

Why does my html page fail to render the same after making it standalone?

html

css

cdn

twitter-bootstrap

更新

更新 2

更新 3