Bootstrap no funciona correctamente en el proyecto MVC
Aug 28 2020
Actualmente estoy usando bootstrap 4.5.2 en mi proyecto MVC. Tengo una vista parcial que se supone que muestra dos columnas (col-xs-6). Sin embargo, no parece funcionar. Esto es lo que tengo:
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"
));
}
Inicio de sesión de cuenta.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>
_Diseño.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>
En AccountLogin.cshtml, col-xs-6 no funciona. muestra dos filas una debajo de la otra. Actualmente, se ve así: problema de Bootstrap
¿Algo no está configurado correctamente o me estoy perdiendo algo? ¿Cómo podría poner las columnas una al lado de la otra?
Respuestas
1 JuanR Aug 27 2020 at 22:30
Me parece a este div:
<div class="gwic-landing-top-section">
Debe marcarse como una fila:
<div class="gwic-landing-top-section row">
Además, para Bootstrap 4.x, no hay col-xs-*. En su lugar, debe usar col-6. asi que:
<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>
Eso debería hacer que sus columnas funcionen como se esperaba.