dodání ihned! nové
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF
Avatar
Mouser
Člen
Avatar
Mouser: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=fra­mework.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
Avatar
Mouser
Člen
Avatar
Mouser: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
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Mouser
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í
+1 bodů
Řešení problému
Nahoru Odpovědět
28.3.2020 20:48
/* Life runs on code */
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Mouser
Člen
Avatar
Odpovídá na Jaroslav Smrž
Mouser: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
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Mouser
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.