代码之家 › 专栏 › 技术社区 › ORHAN TOPDAÄ

Div不是Horizantal引导程序

model-view-controller twitter-bootstrap asp.net-mvc css html

-1

ORHAN TOPDAÄ · 技术社区 · 7 年前

我想使3列水平,并且在主列和子列中使用col-md-12,col-md-4,但是我的行只有一列,子div是垂直的。我的英语不够好,但请帮助我。所有div在其他div下,所有div在页面左侧。我在其他pro中尝试我的html。这是可行的,但在这个项目中有一件事破坏了我的网格系统,但±找不到它。

这是我的嵌套布局

@model HomeViewModel
@*@{
    ViewData["Title"] = "News";
}*@
@section PageTitle{
    etwyrjs
}
@section PageDesc{
    etwyrjs
}
@*<div class="col-md-12">
    <h2>News</h2>
</div>*@
   


    @foreach (var pie in Model.Pies)
    {
        <div class="col-sm-4 col-lg-4 col-md-4">
            <div class="thumbnail">
                <img src="@pie.ImageThumbnailUrl" alt="" />
                <div class="caption">
                    <h3 class="pull-right">@pie.Price.ToString("c")</h3>
                    <h3>
                        <a asp-controller="Home" asp-action="Details"
                           asp-route-id="@pie.Id">@pie.Name</a>
                    </h3>
                    <p>@pie.ShortDescription</p>
                </div>

            </div>
        </div>




    }

这是我的嵌套布局。

@{
    ViewData["Title"] = "LayoutForOthers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row">
    <div class="col-md-12">
        <img src="~/images/bÃ¼yÃ¼k foto-1.png" alt="Snow" style="width:100%;">
        @*<div class="bottom-left">


        </div>*@
        <div class="top-left">
            <h1 style="text-align:left; color:white">@RenderSection("PageTitle")</h1>
            <br />
            <br />
            <p style="text-align:left; color:white;">@RenderSection("PageDesc") Dijital saÄlÄ±k alanÄ±nda dÃ¼nyanÄ±n Ã¶nde gelen isimlerinden olan ve Ä°ngiltere'nin en bÃ¼yÃ¼k saÄlÄ±k teknolojisi topluluÄu Health 2.0 London'Ä± kuran Maneesh Juneja, yapay zekanÄ±n geleceÄi hakkÄ±nda Ã¶nemli aÃ§Ä±klamalarda bulundu. Kendisini ''dijital saÄlÄ±k fÃ¼tÃ¼risti'' olarak nitelendiren Juneja, geÃ§tiÄimiz hafta Ä°stanbul'da katÄ±ldÄ±ÄÄ± etkinlikte yapay zeka ile ilgili sorularÄ± yanÄ±tlarken 2040 yÄ±lÄ±nÄ±n Ã¶nemli bir dÃ¶nÃ¼m noktasÄ± olabileceÄini iÅaret etti.</p>
        </div>
        @*<div class="top-right">Top Right</div>
        <div class="bottom-right">Bottom Right</div>
        <div class="centered">Centered</div>*@
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        @RenderBody()
    </div>
</div>

这是我的主布局图。

                    <div class="col-md-12">
                        @RenderBody()
    </div>

1 回复 | 直到 7 年前

rpm192 7 年前

你在找这样的东西吗?不管您的引导程序版本是什么,这都应该有效。(全屏打开)

<!-- Include this in your <head> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
	<div class="col-sm-12 bg-primary">
		<!-- This is you full width column -->
    <p>This is you full width column</p>
	</div>

	<div class="row">
		<div class="col-sm-4 bg-danger">
			<!-- This is 1/3 columns -->
			<p>Column 1</p>
		</div>
		<div class="col-sm-4 bg-info">
			<!-- This is 2/3 columns -->
			<p>Column 2</p>
		</div>
		<div class="col-sm-4 bg-success">
			<!-- This is 3/3 columns -->
			<p>Column 3</p>
		</div>
	</div>
</div>