如何使用引导程序或 Css 在部分视图中排列此 DIV？答案

【问题标题】：How can I arrange this DIVs in partial view using bootstrap or Css?如何使用引导程序或 Css 在部分视图中排列此 DIV？
【发布时间】：2016-05-19 00:57:08
【问题描述】：

我正在使用 Asp.net MVC 5 和 Razor Engine 开发一个在线商店网站。我有一个使用 Carousel 的展示产品的 View 。我在页面右侧（GoodDetails.cshtml）显示产品的小图像，然后在_GoodDetailsAjax.cshtml 中显示更多详细信息。

GoodDetails.cshtml

<div >
<div class="row">

    <div  class="col-lg-9 col-md-9" id="DivAjax">
        @{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
    </div>

    <div class="col-lg-2 col-md-2 pull-right center-block" >
        @foreach (var item1 in Model.GoodDetails)
        {
            <div>
                <input type="image" class="img-responsive"  src="~/Images/GoodDetails/@item1.DetailsSmallImage1">
            </div>
            @Ajax.ActionLink(@item1.DetailsName, "GoodDetailsAjax", new { id = @item1.DetailsGoodID }, new AjaxOptions()
        {
            HttpMethod = "GET",
            UpdateTargetId = "DivAjax",
            InsertionMode = InsertionMode.Replace
        })

        }
    </div>
</div>

我想用 InfoDiv id 全屏显示该 div。我该怎么做？我尝试了 Css 和非常引导类，但我做不到。

提前致谢。

_GoodDetailsAjax.cshtml

 <div class="row container">

   @foreach (var item in Model.GoodDetails)
  {

    <div style="height:auto;" class="carousel slide article-slide col-md-12 col-lg-12" id="article-photo-carousel">

        <!-- Wrapper for slides -->
        <div style="border:1px solid;" class="carousel-inner cont-slider">

            <div class="item active">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage1">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage2">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage3">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage4">
            </div>
        </div>
        <!-- Indicators -->
        <ol class="carousel-indicators text-center col-lg-12 col-md-12" >
            <li class="active" data-slide-to="0" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage1">
            </li>
            <li data-slide-to="1" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage2">
            </li>
            <li data-slide-to="2" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage3">
            </li>
            <li data-slide-to="3" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage4">
            </li>
        </ol>


        <a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div id="InfoDiv" class="col-lg-12 col-md-12 " >
        <p>@item.DetailsExtraInfo</p>
        <p>@item.DetailsProducer</p>
        <p>@item.DetailsSize</p>

   }
 </div>

【问题讨论】：

你的意思是，你想让div 宽度为100%？所以用 CSS 代码更新你的问题。
是的，我想全屏（100%）宽度那个 div @jiff 我在我的问题中添加了 CSS 字，谢谢
您在示例代码中缺少一个结束 div 是不是？
@item.DetailsSize
下面需要一个
没有在我的项目中我有那个Div，可能是我写这篇文章的时候误删了，谢谢@Seabizkit
k np。只是在 GoodDetails.cshtml 中仅供参考，您使用 9 和 2，总共 11，引导程序使用 12 网格系统... PS 我知道我没有解决问题...但是 ;-).. 只是按照你在做什么。

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

您正在使用 ajax 更新以下代码

<div  class="col-lg-9 col-md-9" id="DivAjax">
    @{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
</div>

此<div> 具有class="col-lg-9 col-md-9"，因此您的局部视图也将呈现在具有相同类class="col-lg-9 col-md-9" 的div 中。所以这就是为什么部分视图中的 div 不是全宽的原因。
您必须使用 ajax 更新 row 代码，如下所示

<div class="col-md-12" id="DivAjax">
    <div class="row">
        <div  class="col-lg-9 col-md-9" >

        </div>
        <div class="col-lg-2 col-md-2 pull-right center-block" >
            @foreach (var item1 in Model.GoodDetails)
            {
                <div>
                    <input type="image" class="img-responsive"  src="~/Images/GoodDetails/@item1.DetailsSmallImage1">
                </div>
                @Ajax.ActionLink(@item1.DetailsName, "GoodDetailsAjax", new { id = @item1.DetailsGoodID }, new AjaxOptions()
            {
                HttpMethod = "GET",
                UpdateTargetId = "DivAjax",
                InsertionMode = InsertionMode.Replace
            })

            }
        </div>
    </div>
</div>

在局部视图中

<div class="row container">
   @foreach (var item in Model.GoodDetails)
   {
    <div class="row">
        <div class="col-md-9">
            <div style="height:auto;" class="carousel slide article-slide col-md-12 col-lg-12" id="article-photo-carousel">
                <!-- Wrapper for slides -->
                <div style="border:1px solid;" class="carousel-inner cont-slider">

                    <div class="item active">
                        <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage1">
                    </div>
                    .
                    <li data-slide-to="3" data-target="#article-photo-carousel">
                        <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage4">
                    </li>
                </ol>
                <a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-2">
            @foreach (var item1 in item)
            {
                <div>
                    <input type="image" class="img-responsive"  src="~/Images/GoodDetails/@item1.DetailsSmallImage1">
                </div>
                @Ajax.ActionLink(@item1.DetailsName, "GoodDetailsAjax", new { id = @item1.DetailsGoodID }, new AjaxOptions()
            {
                HttpMethod = "GET",
                UpdateTargetId = "DivAjax",
                InsertionMode = InsertionMode.Replace
            })

            }
        </div>
    </div>
    <div class="row">
        <div id="InfoDiv" class="col-lg-12 col-md-12 " >
            <p>@item.DetailsExtraInfo</p>
            <p>@item.DetailsProducer</p>
            <p>@item.DetailsSize</p>
        </div>
    </div>
   }
 </div>

您必须将 ajax 表单放在局部视图中，为此您必须对代码进行少量自定义
希望对你有帮助

【讨论】：

谢谢，我知道，但我不知道如何解决？因为我在DivAjax 旁边还有另一个 div ：/
我有一个想法，它会更新整个页面，但会起作用
你能说说你的想法吗？谢谢
非常感谢，但它没有显示部分视图，如果我真的明白 Ajax 代码不能显示部分视图，对吗？
你可以。使用 ViewBag 将Model.GoodDetails 发送到部分文件。

【解决方案2】：

根据Bootstrap，您的_GoodDetailsAjax.cshtml 文件中存在小的组织错误。您在col-lg-12 之后添加了col-md-12，这应该是其他方式。

GoodDetails.cshtml

<div class="container">
  <div class="row">

      <div  class="col-md-9 col-lg-9" id="DivAjax">
      <!-- product details starts -->
      @{Html.RenderAction("GoodDetailsAjax", new { id = Model.GoodDetails.FirstOrDefault().DetailsGoodID });}
      <!-- Product details ends -->
      </div>

      <div class="col-md-3 col-lg-3 pull-right center-block" >
          @foreach (var item1 in Model.GoodDetails)
          {
              <div>
                  <input type="image" class="img-responsive"  src="~/Images/GoodDetails/@item1.DetailsSmallImage1">
              </div>
              @Ajax.ActionLink(@item1.DetailsName, "GoodDetailsAjax", new { id = @item1.DetailsGoodID }, new AjaxOptions()
          {
              HttpMethod = "GET",
              UpdateTargetId = "DivAjax",
              InsertionMode = InsertionMode.Replace
          })

          }
      </div>
  </div>
</div>

_GoodDetailsAjax.cshtml

<div class="row">

   @foreach (var item in Model.GoodDetails)
  {

    <div class="carousel slide article-slide" id="article-photo-carousel">

        <!-- Wrapper for slides -->
        <div style="border:1px solid;" class="carousel-inner cont-slider">

            <div class="item active">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage1">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage2">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage3">
            </div>
            <div class="item">
                <img alt="" title="" src="~/Images/GoodDetails/@item.DetailsImage4">
            </div>
        </div>
        <!-- Indicators -->
        <ol class="carousel-indicators text-center" >
            <li class="active" data-slide-to="0" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage1">
            </li>
            <li data-slide-to="1" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage2">
            </li>
            <li data-slide-to="2" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage3">
            </li>
            <li data-slide-to="3" data-target="#article-photo-carousel">
                <img  alt="" src="~/Images/GoodDetails/@item.DetailsSmallImage4">
            </li>
        </ol>


        <a style="background:none !important;" class="left carousel-control" href="#article-photo-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a style="background:none !important;" class="right carousel-control" href="#article-photo-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div id="InfoDiv" class="" >
        <p>@item.DetailsExtra0nfo</p>
        <p>@item.DetailsProducer</p>
        <p>@item.DetailsSize</p>

   }
   </div>
</div>

小提琴：https://jsfiddle.net/dg0n28z5/3/

希望这是有道理的。

【讨论】：

谢谢亲爱的，我根据你的代码更新了我的视图，但不幸的是结果是一样的:(
嗯...代码在小提琴上对我有用。你修复了divs 类container 和row 吗？他们需要分开divs。
是的，我做到了，我分开了