2

いくつかのイベントの日付を表示するためにフル カレンダーを使用していますが、幅の値に問題があります。最小 1024x768 の解像度と他の大きな画面サイズ (1366x768 など) で適切に動作できるようにしたいのですが、fullcalendar.css のすべての幅の値を引用し、すべての css ファイルを 1 つずつ有効または無効にして、インライン スタイルを挿入してみました。誰かがブートストラップレスポンシブで作業することを勧めましたが、うまくいきませんでした。現在、カレンダーは 1024x768 の解像度で完璧に表示されますが、それ以上の解像度では、カレンダーと右のテーブルの間にギャップがあります。クロムのツール検査要素を使用しましたが、余白やパディングなどの空の領域には何もないと表示されます。

私のヘッダーは次のとおりです。

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- CSS FILES -->
    <!--[if !IE]><!-->
        <link rel="stylesheet" href="/assets/default/css/style.css" type="text/css" />
    <!--<![endif]-->
    <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/assets/default/css/all-ie-only.css" />
    <![endif]-->
    <link rel="stylesheet" href="/assets/default/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="/assets/default/css/bootstrap-responsive.css" type="text/css" />
    <link rel="stylesheet" href="/assets/default/scripts/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.min.css" type="text/css" />
    <link rel="stylesheet" href="/assets/default/css/fullcalendar.css" type="text/css" />
    <link rel="stylesheet" href="/assets/default/css/fullcalendar.print.css" type="text/css" />
    <link href="assets/default/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- END CSS FILES -->

    <!-- JS FILES -->
    <script src="/assets/default/scripts/jquery-1.8.3.min.js" type="text/javascript" ></script>
    <script src="/assets/default/scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript" ></script>
    <script src="/assets/default/scripts/bootstrap.min.js" type="text/javascript" ></script>
    <script src="/assets/default/scripts/fullcalendar.js" type="text/javascript" ></script>
    <!-- END JS FILES -->

    <title>Permission System</title>
</head>

これが私のstyle.cssのコピーです：

と私の完全なカレンダーdiv:

<div style="min-width: 45%; width: auto; float: left; margin-left: 0px;" id="calendar" ></div>

気が狂いそうなので助けてください！

分かりやすいと思われる場合は、teamviewer 情報を送信できます。

css に関するすべてのコードといくつかの写真

4

1 に答える 1

7

fullcalendar.print.css を取り出し、完全なカレンダー css と js のみを持っていることを確認して、印刷 css の問題を除外します。印刷 css は印刷メディア用にのみ含める必要があり、画面用には含めないでください。このページの FullCalendar Source を見てください。ヘッダーに print.css への参照が見つかりません。

于 2013-01-28T17:38:31.120 に答える