Diskuze: Bootstrap grid v ASP.NET MVC

V předchozím kvízu, Test znalostí C# .NET online, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Jakub Švasta

Lektor

Jakub Švasta:28.3.2020 19:02

Ahoj, nemůžu zprovoznit Bootstrap grid v ASP.NET MVC podle svých představ. Grid má mít dva sloupce, první má fixní šířku, a druhý by měl na desktopu vyplnit zbylé místo, a na mobilu se zarovnat pod něj (viz první obrázek). Čili kód gridu by měl fungovat takto:

<div class="container-fluid">
        <div class="row">
                <div class="col-xs-12 col-md-auto">
                        <p>Kratkej div</p>
                </div>
                <div class="col">
                        <p>Dlouhej div a pohoda jazz</p>
                </div>
        </div>
</div>

Jako samostatná HTML stránka s nalinkovaným Bootstrapem to funguje podle představ:
https://www.itnetwork.cz/…lighter/1295

Ale když totéž udělám jako view v ASP.NET MVC, řadí se i na desktopu oba sloupce pod sebe.

HomeController.cs:

public ActionResult TestGrid()
{
        return View();
}

TestGrid.cshtml:

@{
        ViewBag.Title = "Test Grid";
}

<h2>Test Grid</h2>

<div class="container-fluid">
        <div class="row">
                <div class="col-xs-12 col-md-auto">
                        <p>Kratkej div</p>
                </div>
                <div class="col">
                        <p>Dlouhej div a pohoda jazz</p>
                </div>
        </div>
</div>

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
</head>
<body>
        <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                </button>
                                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                        </div>
                        <div class="navbar-collapse collapse">
                                <ul class="nav navbar-nav">
                                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                        <li>@Html.ActionLink("Test Grid", "TestGrid", "Home")</li>
                                        <li>@Html.ActionLink("About", "About", "Home")</li>
                                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                                </ul>
                        </div>
                </div>
        </div>
        <div class="container body-content">
                @RenderBody()
                <hr />
                <footer>
                        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
                </footer>
        </div>

        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

Věděl by někdo, co s tím? Zjistil jsem, že prvnímu sloupci nastavuje width 100% CSS preprocesor (stejně jako padding, který tam taky nechci). Dá se to někde vypnout? Nebo jak upravím chování těch preprocesorů? Nechápu, kde ve struktuře aplikace je tohle definováno, jako cestu to indikuje nějaké /scss/mixins/grid=framework.scss (viz obrázky 2 a 3), ale nic takového v projektu neexistuje. Díky za rady.

Editováno 28.3.2020 19:03

Odpovědět

28.3.2020 19:02

Jakub Švasta

Lektor

Jakub Švasta:28.3.2020 19:09

Jen pro pořádek, první měl být ten prostřední obrázek, nevím, jak se tu dá nastavit pořadí obrázků v příspěvku.

Nahoru Odpovědět

28.3.2020 19:09

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:28.3.2020 20:48

Ahoj, zkontroluj, že

linkuješ správnou verzi bootstrap, která tyto styly vykresluje, jak potřebuješ
jestli v té složce máš všechny potřebné bootstrap soubory a nelinkuje si tak novější CDN
zkusil bych prověřit třídu body-content, případně zakomentovat, jestli to nerozhazuje ona

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

28.3.2020 20:48

/* Life runs on code */

Jakub Švasta

Lektor

Jakub Švasta:30.3.2020 21:09

Díky. Zjevně mi v cache prohlížeče zůstala stará verze Bootstrapu. Dnes po spuštění aplikace už grid fungoval správně (ale bylo potřeba trochu přepsat _Layout, aby odpovídal Bootstrapu 4).

Nahoru Odpovědět

30.3.2020 21:09

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:30.3.2020 22:18

To jsem rád, že to pomohlo Ať se ti daří.

Nahoru Odpovědět

30.3.2020 22:18

/* Life runs on code */

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.