引导程序在MVC项目中不能正常工作
引导程序在MVC项目中不能正常工作
提问于 2020-08-27 15:23:21
我目前在我的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不起作用。它在另一行下面显示两行。目前，它看起来是这样的：Bootstrap issue
是配置不正确还是我遗漏了什么？我如何才能使列彼此相邻呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-27 15:30:44
在我看来，它类似于下面的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>这应该会使您的列按预期工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63619235
复制相关文章
相似问题
腾讯云开发者
