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

【问题标题】：Why does my html page fail to render the same after making it standalone?为什么我的 html 页面在使其独立后无法呈现相同的内容？
【发布时间】：2016-07-17 15:56:41
【问题描述】：

我有一个网页 (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 表一团糟。

但是为什么，我该如何解决呢？为什么我的独立 html 页面无法以非难看的方式呈现，即使我引用了页面使用的 Bootstrap 类？

更新

感谢 stackingjasoncooper 的评论，我通过添加这个 CSS 让表格看起来更好：

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 包含在 head 部分：

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

...在正文中：

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

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

【问题讨论】：

  • 您仍然缺少一些 CSS。例如，Bootstrap 不会在不调用类的情况下设置交替的表格行颜色，而您没有这样做。 中的交替行颜色也不在您的样式中。检查您的 .NET 应用程序的头组件或在该 .NET 页面的浏览器中查看源代码并查找其他样式表。
  • 将此作为答案，我会接受（请参阅我的更新，尤其是最后一个）。

标签： html css twitter-bootstrap cdn


【解决方案1】：

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

关于您的更新：

视口标记
viewport meta tag 有助于扩展您的网站以适应不同的屏幕尺寸，例如平板电脑和手机。使用您拥有的非常标准的版本，您基本上是在说缩放网站以适应屏幕。

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

Bootstrap 很棒
您正在使用Bootstrap framework，它已经内置了很多您正在编写的CSS 样式。例如，查看Bootstrap table styles。它们已经完成并且可用；你只需要打电话给班级。玩得开心！

【讨论】：

    猜你喜欢
    • 2013-02-16
    • 1970-01-01
    • 2021-05-24
    • 2010-10-03
    • 2012-02-26
    • 2022-09-29
    • 1970-01-01
    • 2022-11-23
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode