Question

我想使3列水平，我将col-md-12用于主列和将其子列使用col-md-4，但我的行只有一列并且子div是垂直的。我的英语不够好，但是请帮帮我。所有div都在其他div之下，所有div都在页面的左侧。我尝试在其他项目中运行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>

Answer 1

您是否正在寻找类似的东西？无论您的Bootstrap版本是什么，它都应该起作用。（全屏打开）

<!-- 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>

div不是水平引导程序

1 个答案: