为什么我的html页面在独立后才能呈现相同的内容？
我有一个网页（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>
...但翻译中丢失了很多。它看起来像这样：
所以你可以看到，我的边界已经消失了，HR对于一个懒惰的男孩来说比一个发作性睡眠的人更虚伪，并且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是身体内的第一个部分，现在看起来完全一样。
1 个答案:
答案 0 :(得分：1)
为什么您的独立页面与您的.NET页面不匹配
你还缺少一些CSS。例如，Bootstrap不会在不调用类的情况下设置交替的表行颜色，而您没有这样做。您<head>中的交替行颜色也不在您的样式中。检查.NET应用程序的头部组件或在该.NET页面的浏览器中查看源代码，并查找其他样式表。
关于您的更新：
视口标记
viewport meta tag有助于针对不同的屏幕尺寸扩展您的网站，例如平板电脑和手机。使用非常标准的版本，你基本上就是说缩放网站以适应屏幕。
<强> @RenderBody（）
我认为这是一个.NET控件。我不认为它会对HTML页面产生任何影响，所以我认为你不需要它。
Bootstrap非常棒
您正在使用Bootstrap framework，它已经内置了许多您正在编写的CSS样式。例如，请查看Bootstrap table styles。它们已经完成并可用;你只需要打电话给班级。玩得开心！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？