如何修复导航栏不调整完整日历的大小？

时间：2019-04-02 23:13:48

标签： html css fullcalendar media-queries responsive

我的导航栏不会像其他所有页面一样调整大小，我相信这是由于日历已满。我已经尝试过更改边距和填充，但是似乎没有任何解决办法。导航栏的所有样式似乎都在那里，但也许我可能忽略了某些内容？有什么建议吗？

headerCalendar.php 

<?php
session_start();
if(!isset($_SESSION['userid']) && empty($_SESSION['userid'])){ 
     header('location:onSignIn.php'); // redirect to login page if user details is not set in sessions    
}
?>

<html>
  <head>
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.min.css"/>


    <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

    h2 {     
  margin: 20px 45px;
     }
 h1 {     
   text-align: center;
     } 
p {
  margin: 20px 45px;
}

.responsive {
  width: 100%;
  height: auto;
}
body {margin: 0;}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(119,13,41);
}

ul.nav li {float: left;}
ul.nav li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                 font-family: 'Open Sans', Arial;
                font-style: normal;
                font-weight: 300;
            }
ul.nav li a:hover:not(.active) {

    background-color: rgb(237,235,235);
    color: rgb(119,13,41);
    }
ul.nav li a.active {
        background-color: rgb(169,5,51);
    }
ul.nav li.right 
        {
        float: right;
    }
@media screen and (max-width: 600px) {
  ul.nav li.right, 
  ul.nav li {float: none;}
}
</style>
</head>


  <ul class="nav">
  <li><a  href="home.php">Home</a></li>
  <li><a href="myProfile.php">My Profile</a></li>
  <li><a href="faq.php">Resources</a></li>
    <li><a class="active" href="appointmentrequest.php">Schedule Appointment</a></li>
  <li class="right"><a href="">Sign Out</a></li>
</ul>

calendar.php 

<?php
$page_title = "Schedule Time";

require_once('includes/headerCalendar.php');

session_start();

//escape variables for security sql injection
$formfname = ($_POST['fname']);
$formlname = ($_POST['lname']);
$formusername = ($_POST['username']);
$formphonenum = ($_POST['phonenum']);
$formemail = ($_POST['email']);
$formroom = ($_POST['room']);
$formbuilding = ($_POST['building']);
$formissue = ($_POST['issue']);
$formdescription = ($_POST['description']);

$_SESSION['formfname'] = $formfname;
$_SESSION['formlname'] = $formlname;
$_SESSION['formusername'] = $formusername;
$_SESSION['formphonenum'] = $formphonenum;
$_SESSION['formemail'] = $formemail;
$_SESSION['formroom'] = $formroom;
$_SESSION['formbuilding'] = $formbuilding;
$_SESSION['formissue'] = $formissue;
$_SESSION['formdescription'] = $formdescription;

?>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<style>

      h2 {     
  margin: 20px 45px;
     }
 h1 {     
   text-align: center;
     } 
p {
  margin: 20px 45px;
}

.responsive {
  width: 100%;
  height: auto;
}
body {margin: 0;}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(119,13,41);
}

ul.nav li {float: left;}
ul.nav li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                 font-family: 'Open Sans', Arial;
                font-style: normal;
                font-weight: 300;
            }
ul.nav li a:hover:not(.active) {

    background-color: rgb(237,235,235);
    color: rgb(119,13,41);
    }
ul.nav li a.active {
        background-color: rgb(169,5,51);
    }
ul.nav li.right 
        {
        float: right;
    }
@media screen and (max-width: 600px) {
  ul.nav li.right, 
  ul.nav li {float: none;}
}
 body {
  font-size: 14px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  }
 #calendar {
  width: 600px;
  margin: 0 auto;
  }



</style>
</head>


<body>

<script>


 $(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();


  var calendar = $('#calendar').fullCalendar({
   //changed editable from true to false
   editable: false,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'agendaWeek'
    //right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaWeek',
    minTime: '12:00:00',
    maxTime: '20:00:00',
    //defaultTimedEventDuration: '01:00:00',
    //forceEventDuration: true,
    businessHours: true,
    businessHours:{
      dow: [1,2,3,4,5],

      start: '12:00',
      end: '20:00',
                              },
    allDaySlot: false, 
    longPressDelay: 450,




   events: "events.php",


   eventRender: function(event, element, view) {

    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },   

   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
   var title = 'Reserved';



   if (title) {
   var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
   var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
   $.ajax({
       url: 'add_events.php',
       data: 'title='+ title+'&start='+ start +'&end='+ end,
       type: "POST",
       success: function(json) {
       alert('Added Successfully');
       }
   });

   calendar.fullCalendar('renderEvent',
   {
       title: title,
       start: start,
       end: end,
       //allDay: allDay
   },
   true
   );
   }
   calendar.fullCalendar('unselect');
   },

/*
   editable: true,
   eventDrop: function(event, delta) {
   var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
   $.ajax({
       url: 'update_events.php',
       data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
       type: "POST",
       success: function(json) {
        alert("Updated Successfully");
       }
   });
   },
   */
   /*
   eventClick: function(event) {
    var decision = confirm("Do you really want to do that?"); 
    if (decision) {
    $.ajax({
        type: "POST",
        url: "delete_event.php",
        data: "&id=" + event.id,
         success: function(json) {
             $('#calendar').fullCalendar('removeEvents', event.id);
              alert("Updated Successfully");}
    });
    }
    },*/
    /*
   eventResize: function(event) {
       var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
       var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
       $.ajax({
        url: 'update_events.php',
        data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
        type: "POST",
        success: function(json) {
         alert("Updated Successfully");
        }
       });
    }
    */

  });

 });


</script>    

 <h2>Tickets</h2>
 <br>

 <div class='container'>
 <div class='row'>
<div id='calendar''></div>
</div>
</div>
 <form action="ticket_submit.php">
    <input type="submit" value="Submit">
 </form>

</body>


</html>

1 个答案:

答案 0 :(得分：0)

这是CSS问题。 使用bootstrap.css时，“ nav”类导致UL显示为“ flex”， 如果您将其强制更改为“ display：block”，它将正常工作。

.nav {display: block !important;}

最重要的是，您应该计划要使用的引导程序版本。 如果这是项目的开始，则可以研究稳定的引导程序版本。

尝试提供唯一的类名，而不是'nav'，您可以输入'ulTopNav'等。

相关问题
最新问题