c# - 引导程序在 MVC 项目中无法正常工作
问题描述
我目前在我的 MVC 项目中使用 bootstrap 4.5.2。我有一个部分视图应该显示两列(col-xs-6)。但是,它似乎不起作用。这是我所拥有的:
BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
RegisterJqueryUnobtrusiveAjaxBundle(bundles); //Kentico's scripts
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.maskedinput.min.js",
"~/Scripts/App/SelectableRows.js"
));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css",
"~/Content/themes/GWICTheme/GWIC.css"
));
}
AccountLogin.cshtml
@model AE.Web.Gwic.Models.AccountLoginModel
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc
@{
ViewBag.Title = "AccountLoginLanding";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles
{
@* Includes stylesheets necessary for page builder functionality *@
@Html.Kentico().PageBuilderStyles()
}
@section scripts
{
@* Includes scripts necessary for page builder functionality *@
@Html.Kentico().PageBuilderScripts()
}
<div class="gwic-landing-page">
<div class="gwic-landing-navigation row">
<div class="GWICappIcon">
<div>
<img src="~/images/gwic_diamond_logo_blue.png" alt="Application" title="Application" height="50" width="50" />
</div>
<h1>myNavigator</h1>
</div>
</div>
<div class="gwic-landing-body">
<div class="gwic-landing-top-section">
<div class="col-xs-6">
<div class="section button-grid">
@Html.Kentico().EditableArea("gwic-landing-left-column")
@*@Html.Kentico().WidgetZone()*@
<section class="section section--padded">
<div class="section-inner">
@Html.Kentico().WidgetZone()
</div>
</section>
</div>
</div>
<div class="col-xs-6">
@Html.Kentico().EditableArea("gwic-landing-right-column")
@Html.Kentico().WidgetZone()
helpful tools and links area
</div>
</div>
</div>
</div>
<div class="logout-button">
@Html.ActionLink("Logout", "Logout", "Account", null, new { @class = "btn btn-primary" })
</div>
_Layout.cshtml
@using AE.Web.Gwic.Views
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title</title>
@Styles.Render("~/bundles/sass")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jquery-unobtrusive-ajax")
@RenderSection("styles", required: false)
</head>
<body>
<div class="mainDiv">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Great Western Insurance. All Rights Reserved.</p>
<span class="text-muted" style="font-size:x-small">@Html.AppVersion()</span>
</footer>
</div>
@RenderSection("scripts", required: false)
</body>
</html>
在 AccountLogin.cshtml 中,col-xs-6 不起作用。它显示了彼此下方的两行。目前,它看起来像这样:引导问题
是不是配置不正确或者我错过了什么?我怎样才能让列彼此相邻?
解决方案
它在我看来像这个 div:
<div class="gwic-landing-top-section">
应标记为一行:
<div class="gwic-landing-top-section row">
此外,对于 Bootstrap 4.x,没有col-xs-*
. 您应该改用col-6
. 所以:
<div class="gwic-landing-top-section row">
<div class="col-6">
<div class="section button-grid">
@Html.Kentico().EditableArea("gwic-landing-left-column")
@*@Html.Kentico().WidgetZone()*@
<section class="section section--padded">
<div class="section-inner">
@Html.Kentico().WidgetZone()
</div>
</section>
</div>
</div>
<div class="col-6">
@Html.Kentico().EditableArea("gwic-landing-right-column")
@Html.Kentico().WidgetZone()
helpful tools and links area
</div>
</div>
这应该使您的列按预期工作。
推荐阅读
- c++ - 如何使用 uin8_t 数组分配结构?
- java - 地图列表
使用 Mapstruct 从 Java POJO 到 Protobuf (proto3) - dependency-management - 即使在独立任务失败后如何运行依赖任务?
- regex - Postgres 9.5 中使用 regexp_replace 的正向 Lookbehind
- jenkins - 在詹金斯中获取父作业的内部版本号而不是提升的内部版本号
- reactjs - ReactJS 最流行的后端框架是什么?
- java - 如何将 Java 文件中的值发送到 testng.xml
- javascript - 在php方法ajax中显示js代码
- synchronization - AEM Page Export,不适用于非管理员用户
- python - 使用python进行矩阵运算