c# - 卡片视图引导程序

Question

我正在为此卡片视图应用响应式网格布局。我的项目在 .net MVC4 c# 中。

在窄屏布局之前 -

窄屏后——

这是我做窄屏后的结果，我已经在布局中解决了引导响应 css。正在从数据库中提取此列表。

列表-

<div class="container-fluid">
  <div class="nav-collapse in collapse" style="height: auto;">
<script type="text/x-kendo-tmpl" id="template">



         <div class="span3" style="margin-top:0px;margin-left:0px;margin-bottom:0px;margin-right:4px;cursor:pointer;" Onclick="Contact_List_CardEdit('@Url.Contact_PartialView_Main()?ContactID=${ContactID}')">
           <address class="well">
                <strong>${DisplayName}</strong><br/>
                <em>${Email1}</em><br/>
                <em>${PhoneOffice}</em><br/>
                <em>${Address}</em><br/>
                </address>

                </div>

</script>
 </div>   
        </div>

当我做窄屏时，我想要这个视图的响应式布局。Kendo UI 用于此处的列表视图。

Answer 1

我认为您必须在 CSS 响应文件中设置样式，例如

@-ms-viewport {
    width: device-width;
}
@media (max-width: 767px) {
    .hidden-desktop {
       display: inherit !important;
    }
 }

或者您可以通过 JavaScript 捕捉屏幕宽度并仅设置两列。我通过设置普通容器并将流体类放在一行来解决它，就像这样。

 <div class="container">
    <div class="row-fluid">
       <div class="span3">
         Some_code_here
       </div>
       <div class="span3">
         Some_code_here
       </div>
       <div class="span3">
         Some_code_here
       </div>
       <div class="span3">
         Some_code_here
       </div>
    </div>
  </div>