c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC

标签 c# html css asp.net-mvc twitter-bootstrap

我正在将 Web 应用程序从带有 Bootstrap 的 HTML 转换为带有 Bootstrap 的 ASP.Net (C#) MVC。我已将索引文件移到 View 中，已将主题 (dashboard.css) 添加到内容目录，已将图像添加到图像目录，并更新了捆绑配置文件。

当我在 Firefox 中运行 HTML 页面时，我获得了包含 12 个连续元素的正确布局。当我用 ASP.Net MVC 运行它时，我只得到一行中的 4 个元素。与纯 HTML 相比，一切都非常大。我正在尝试像 HTML 一样获取行中的 12 个元素。这是我的第一个 ASP.Net MVC 应用程序。关于我接下来应该看哪里的任何建议？这是我的 View 文件:

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <ul class="nav nav-justified">
                <li><a class="navbar-brand" href="#"><img src="images/Logo-Smaller.png" alt="Jenkins"></a></li>
            </ul>   
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="jenkins.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="aboutus.html">About</a></li>
                <li><a href="contactus.html">Contact Us</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 col-lg-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Products <span class="sr-only">(current)</span></a></li>
                <li><a href="#JFans">Jenkins Replacement Fans</a></li>
                <li><a href="#MFans">Manufacturer Fans</a></li>
                <li><a href="#Protection">Motor Protection</a></li>
                <li><a href="#MParts">Electric Motor Parts</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main col-lg-10">
            <span class="anchor" id="JFans"></span>                 
            <h3 class="page-header">Jenkins Replacement Fans</h3>
            <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 col-md-1 col-lrg-1 placeholder">
                    <img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                        <h4><a href="series1.html">shrouded</a></h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Shallow Recess</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Paddle Wheel</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>shrouded</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Shallow Recess</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Paddle Wheel</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
                    <img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Flat Backed</h4>
                </div>
            </div>  
        </

这是我的 CSS 文件:

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 65px;
}

.navbar-brand {
    max-height: 100%;
    height: 100%;
    width: auto;
    margin: 0 0 0 0;
}
.navbar-brand >img {
    max-height: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
    padding-top: 0px;
    float: none;
}

.navbar-nav li a {
    line-height: 65px;
    height: 65px;
    padding-top: 0;
}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
  background-color: #F0F0F0;

}



/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}
.table td {
    text-align:left !important;
}
/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}


/*
 * Main content
 */

.main {
  padding: 20px;
}
@media (min-width: 768px) {
  .main {
    padding-right: 40px;
    padding-left: 40px;
  }
}
.main .page-header {
  margin-top: 0;
}


/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}
.anchor{
  display: block;
  height: 85px; /*same height as header*/
  margin-top: -85px; /*same height as header*/
  visibility: hidden;
}

最佳答案

到目前为止，您使用的是相同版本的 Bootstrap，HTML 与 Bootstrap 和 MVC 与 Bootstrap 没有区别。我已经将许多商业 HTML Bootstrap 主题转换为 MVC Bootstrap 主题，而且非常简单。

首先，您缺少一个结束正文标记。这可能是个问题。

其次，目前不要使用 MVC Bundle。在 View 中复制所有现有的 HTML，并确保所有脚本和 CSS 都引用到正确的路径。编写一个只返回 View 的简单操作方法。一旦获得所需的输出，就可以使用动态元素修改 HTML。

第三，确保没有对使用以下代码的 div 应用填充或边距。

col-sm-9 col-sm-offset-3

最后，使用浏览器中可用的开发人员工具找出 HTML 页面的确切输出。您始终可以编辑 HTML 并在许多现代浏览器中获得实时结果。

关于c# - 使用 Bootstrap 从 HTML 转换为 .NET MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34388287/

上一篇：html - 将下拉子菜单 <li> 元素对齐到页面右侧，同时保持 <li> 元素的正确顺序

下一篇：html - 嵌入式 Google Drive 内容扩展到 iOS 设备上自己的容器之外

相关文章：

c# - 为什么表达式末尾的重复分号和更多分号不会导致 Visual Studio 编译器出错？

css - 左侧为完整菜单，右侧为两个内容 Pane : DIV-and-CSS-only approach?

html - 将全宽 slider 或图像添加到 Twitter Bootstrap 主题时出现问题

java - 如何根据我单击的按钮更改 div 的颜色？ (仅 javascript/css/html 无库)

html - CSS 不会在父 div 中居中列表

html - Mozilla 中的部分消失了

c# - 在程序运行时编译/执行 XAML

c# - C#有没有类似于Python的通用换行符的东西

html - 带有图片的按钮 - CSS 问题

c# - Java 与 C# 和 .NET 之间的区别

©2024 IT工具网  联系我们