卡片视图引导

我正在为此卡片应用响应式网格布局view.My项目在.net MVC4 c＃中。卡片视图引导

窄屏幕布局之前是 - Card view of contacts

窄屏幕后 -

enter image description here

下面是导致后我做的窄屏幕，我引导布局响应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是列表视图。

来源

2013-02-11 Manoj

你似乎不使用任何'.row'包装 – Ben 2013-02-11 05:07:10

另外，我不会在'span *'元素上弄乱左/右边距 – Ben 2013-02-11 05:07:46

我认为你必须设置样式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>

来源

2013-02-11 07:41:27 t00thy

卡片视图引导

回答

相关问题