1

このカードビューにレスポンシブグリッドレイアウトを適用しています。私のプロジェクトは.netMVC4c＃にあります。

狭い画面レイアウトの前は- 連絡先のカードビュー

狭い画面の後-

ここに画像の説明を入力してください

これは、狭い画面を実行した後の結果です。レイアウトでブートストラップレスポンシブ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>

狭い画面を実行するときに、このビューのレスポンシブレイアウトが必要です。剣道UIはこちらの一覧表示用です。

4

1 に答える 1

0

CSSレスポンシブファイルでスタイルを設定する必要があると思います

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

または、JavaScript を使用して画面の幅をキャッチし、2 つの列のみを設定することもできます。このように、通常のコンテナを設定し、流体クラスを行に配置することで解決しました。

 <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-11T07:41:27.970 に答える