Asp.net mvc MVC中的Bootstrap-CSS设计

我有这个设计在MVC

@foreach (var item in Model)
            {
                <div class="col-md-6 col-sm-12 col-xs-12 remove-padd-right">
                    <div class="side-A">
                        <div class="product-thumb">
                            <div class="image">
                                <a><img src="~/img/hotels/@item.Images.FirstOrDefault().Image" style="height:281px;" class="img-responsive" alt="Avatar"></a>
                            </div>
                        </div>
                    </div>
                    <div class="side-B">
                        <div class="product-desc-side">
                            <h3><a>@item.Name</a></h3>
                            <p>
                                <span class="fa fa-address-book-o"></span> @item.Address<br />
                                <span class="fa fa-react"></span> @item.Reviews.Count Reviews    <br />
                                @item.Ratings.Count Ratings
                            </p>

                            <div class="links"><a href="@Href("~/Hotels/Details/"+item.Id)">View details</a></div>

                        </div>
                    </div>
                </div>
                <div class="clear"></div>

            }

@foreach（模型中的变量项）
{
}

我需要做的设计就像在简单的HTML这样

    <div class="col-md-6 col-sm-12 col-xs-12 remove-padd-right">
                                <div class="side-A">
                                    <div class="product-thumb">
                                        <div class="image">
                                            <a><img src="images/category1.png" class="img-responsive" alt="image"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="side-B">
                                    <div class="product-desc-side">
                                        <h3><a>luxury spa</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consec adipiscing elit. Nunc lorem nulla, ornare eu felis luctus non maximus vitae, portt neque. ipsum dolor sit amet, consec adipiscing elit.</p>
                                        <div class="links"><a href="single-blog.html">Read more</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                            <div class="col-md-6 col-sm-12 col-xs-12 remove-padd-left">
                                <div class="side-A">
                                    <div class="product-thumb">
                                        <div class="image">
                                            <a><img alt="image" class="img-responsive" src="images/category2.png"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="side-B">
                                    <div class="product-desc-side">
                                        <h3><a>Beatusish ingl</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consec adipiscing elit. Nunc lorem nulla, ornare eu felis luctus non maximus vitae, portt neque. ipsum dolor sit amet, consec adipiscing elit.</p>
                                        <div class="links"><a href="single-blog.html">Read more</a></div>
                                    </div>
                                </div>
                            </div>
<div class="col-md-6 col-sm-12 col-xs-12 remove-padd-right">
                            <div class="side-A">
                                <div class="product-desc-side">
                                    <h3><a>luxury room</a></h3>
                                    <p>Lorem ipsum dolor sit amet, consec adipiscing elit. Nunc lorem nulla, ornare eu felis luctus non maximus vitae, portt neque. ipsum dolor sit amet, consec adipiscing elit.</p>
                                    <div class="links"><a href="single-blog.html">Read more</a></div>
                                </div>
                            </div>

                            <div class="side-B">
                                <div class="product-thumb">
                                    <div class="image txt-rgt">
                                        <a class="arrow-left"><img src="images/category3.png" class="img-responsive" alt="imaga"></a>
                                    </div>
                                </div>
                            </div>
                        </div>

HTML截图-
您没有在
之后的类
移除padd right
和
移除padd left
之间切换

编辑

添加了代码示例

>> somewhere at the top of your view, you have something like this
@{
   Layout = "~/Views/_LayoutRoot.cshtml";

   >> add variable for toggeling classname; init with second value
   var removePaddClass = "remove-padd-left";
}

@foreach (var item in Model)
{
   // swap classes for each item
   removePaddClass
      = removePaddClass == "remove-padd-right"
         ? "remove-padd-left"
         : "remove-padd-right";

   <div class="col-md-6 col-sm-12 col-xs-12 @removePaddClass">
      >> ... your html
      <div class="clear"></div>
   </div>
}

>在视图顶部的某个地方，您可以看到如下内容
@{
Layout=“~/Views/\u LayoutRoot.cshtml”；
>>添加用于切换classname；init和第二个值的变量
var removePaddClass=“remove padd left”；
}
@foreach（模型中的var项目）
{
//交换每个项目的类
移除类
=removePaddClass==“移除右侧填充”
？“拆下左侧衬垫”
：“移除padd right”；
>>…你的html
}
有什么问题吗？它看起来很完美，简单的HTML和MVC的HTML之间只有一个区别：
内的
.side-B
标记。布局是由CSS控制的（至少部分），所以你还需要检查屏幕截图中显示的页面应用了多少不同的CSS。实际上我想要的是与HTML相同的设计，加载第三项时，图像应位于右侧，检查第三项的简单html的css。参考图片。我如何检查屏幕截图的CSS？你使用的是Bootstrap4吗？这个标记似乎是为Bootstrap 3准备的，你能帮我写代码吗！我是MVC的初学者|谢谢@Jurgen_Rohr，现在我有了实施的想法。