时间戳

首页 > 解决方案 > divs are not horizantal bootstrap

html - divs are not horizantal bootstrap

问题描述

I want to make 3 columns horizontal and ı use col-md-12 for main column and for child columns col-md-4 but my row have only one columns and sub divs are vertical.My english not good enough but please help me.All divs are under other div and all divs are left side of page.I try my html in other project this is worked but in this projecy one thing corrupted my grid system but ı cant find it.

This is my nested Layout

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




    }

This is my nested Layout.

@{
    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>

This is from my main layout.

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

标签： htmlcssasp.net-mvctwitter-bootstrapmodel-view-controller

解决方案

你在寻找这样的东西吗？无论您的 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>

推荐阅读