卡片視圖引導

我正在爲此卡片應用響應式網格佈局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

卡片視圖引導

回答

相關問題