卡视图引导程序

Question

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

在缩小屏幕布局之前 -

缩小屏幕后 -

这是我做窄屏后的结果，我已经解决了布局中的bootstrap响应css问题。该列表正从数据库中提取出来。

LIST -

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