Question

基本上，我想使此页面具有响应性，以便仅在不使用Bootstrap样式的情况下，仅使用引导网格（容器，行，列）在移动设备上查看它。尽管我已经尝试了很多方法，但现在还没有这样做。我其他没有PHP的页面并没有给我带来太多麻烦，但是这个页面给我带来了麻烦，我无法使其在手机上正常显示。

我尝试从页面顶部的容器开始，在php块之外，然后为我的h2标签创建一行，并尝试在while循环内执行相同的操作。但是，它没有响应，结果和列标题均未正确对齐。

“ headerprofile.php”

<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">
</head>

<?php
require_once('includes/headerprofile.php');
require_once('includes/database.php');
?>

<html>
     <head>

        <style>
form.searchbar {
                 margin: 25px 50px;
            }

h1.profile {
margin: 25px 50px;
}
    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;
}

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;}
}

.table  { 
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
            .tr{ 
                display: table-row; 
                padding: 7px;
            }
            .td{ 
                display: table-cell;
                padding: 7px;
            }


</style>
    </head>
<body> 
<h1 class="profile"> My Appointments </h1>

        <div class ="search" id="browse">
            <p> Find your appointment below or search by keyword</p>

        <form id="" class="searchbar" action="searchAppt.php" method="get">
           <input type="text" name="terms" size="40" class = "sbar" required value="Search by keyword" oninput="validity.valid||(value='');"
                       onblur="if (this.value == '') {
                                    this.value = 'Enter keyword';
                                }"
                       onfocus="if (this.value == 'Enter keyword') {
             this.value = '';
         }"/>&nbsp;&nbsp;
                <button type="submit" class = "btn">Search</button>
            </form>
        </div>
    </div>

    <hr>

    <h2> Future Appointments</h2>
    <p>
    <label> Appointment(s): <br/> 

        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "<div class='table'>
                <div class='tr'>
                <div class='td'><b>Ticket #</b></div>
                <div class='td'><b>Username</b></div>
                <div class='td'><b>Building</b></div>
                <div class='td'><b>Issue</b></div>
                <div class='td'><b>Date</b></div>
                <div class='td'><b>Start Time</b></div>
                <div class='td'><b>End Time</b></div>
                <div class='td'></div>
                </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='tr'>
                    <div class='td'>".$row["id"]."</div>
                    <div class='td'>".$row["username"]."</div>
                    <div class='td'>".$buildingfuture."</div>
                    <div class='td'>".$row["issue"]."</div>
                    <div class='td'>".$datefuture."</div>
                    <div class='td'>".$startfuture."</div>
                    <div class='td'>".$endfuture."</div>
                    <div class='td'><form action='ticketdetails.php' method='post'>
                        <input type='hidden' name='id' value='".$row["id"]."'>
                        <input type='submit' value='Ticket Details'></form>
                    </div>
                    </div>";
                }
                echo "</div>";
            } else {
                echo "<br/><b>No future appointments!</b>";
            }
        ?>
    </label>
    </p> 

    <hr>

Answer 1

假设bootstrap4网格只是一个示例-这将是3列环绕在移动设备上的

<h2> Future Appointments</h2>
    <p>
    <label> Appointment(s): <br/> 
    </label>

<div class="container">
        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "
            <div class='row'>
               <div class='col-4 col-md-1'><b>Ticket #</b></div>
               <div class='col-4 col-md-2'><b>Username</b></div>
               <div class='col-4 col-md-2'><b>Building</b></div>
               <div class='col-4 col-md-2'><b>Issue</b></div>
               <div class='col-4 col-md-2'><b>Date</b></div>
               <div class='col-4 col-md-1'><b>Start Time</b></div>
               <div class='col-4 col-md-1'><b>End Time</b></div>
               <div class='col-4 col-md-1'></div>
            </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='row'>
            <div class='col-4 col-md-1'>".$row["id"]."</div>
            <div class='col-4 col-md-2'>".$row["username"]."</div>
            <div class='col-4 col-md-2'>".$buildingfuture."</div>
            <div class='col-4 col-md-2'>".$row["issue"]."</div>
            <div class='col-4 col-md-2'>".$datefuture."</div>
            <div class='col-4 col-md-1'>".$startfuture."</div>
            <div class='col-4 col-md-1'>".$endfuture."</div>
            <div class='col-4 col-md-1'>
                <form action='ticketdetails.php' method='post'>
                    <input type='hidden' name='id' value='".$row["id"]."'>
                    <input type='submit' value='Ticket Details'>
                </form>
            </div>
                    </div>";
                }
            } else {
                echo "<br/><b>No future appointments!</b>";
            }
        ?>
</div>

Answer 2

鉴于您所显示的内容，您至少需要移动headerprofile.php包含，以便它在<head>标签内呈现：

<?php
require_once('includes/database.php');
?>

<!doctype html>
<html>
     <head>
        <?php require_once('includes/headerprofile.php'); ?>

        <style>
            form.searchbar {
                margin: 25px 50px;
            }

            h1.profile {
            margin: 25px 50px;
            }
            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;
            }

            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;}
            }

            .table  { 
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
            .tr{ 
                display: table-row; 
                padding: 7px;
            }
            .td{ 
                display: table-cell;
                padding: 7px;
            }
        </style>
    </head>
    <body> 
        <h1 class="profile"> My Appointments </h1>

        <div class ="search" id="browse">
            <p> Find your appointment below or search by keyword</p>

            <form id="" class="searchbar" action="searchAppt.php" method="get">
               <input type="text" name="terms" size="40" class = "sbar" required value="Search by keyword" oninput="validity.valid||(value='');"
                           onblur="if (this.value == '') {
                                        this.value = 'Enter keyword';
                                    }"
                           onfocus="if (this.value == 'Enter keyword') {
                 this.value = '';
             }"/>&nbsp;&nbsp;
                <button type="submit" class = "btn">Search</button>
            </form>
        </div>

        <hr>

        <h2> Future Appointments</h2>

        <p>
            <label> Appointment(s):</label>     
        </p> 

        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.username 
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and a.start_time >= NOW()
            ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo "<div class='table'>
                <div class='tr'>
                <div class='td'><b>Ticket #</b></div>
                <div class='td'><b>Username</b></div>
                <div class='td'><b>Building</b></div>
                <div class='td'><b>Issue</b></div>
                <div class='td'><b>Date</b></div>
                <div class='td'><b>Start Time</b></div>
                <div class='td'><b>End Time</b></div>
                <div class='td'></div>
                </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttimefuture = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtimefuture = strtotime($row["end_time"]);
                    $datefuture = date("m/d/y", $starttimefuture);
                    $startfuture = date("g:i A", $starttimefuture);
                    $endfuture = date("g:i A", $endtimefuture);
                    $buildingfuture = str_replace('_',' ', $row["building"]);
                    echo "<div class='tr'>
                    <div class='td'>".$row["id"]."</div>
                    <div class='td'>".$row["username"]."</div>
                    <div class='td'>".$buildingfuture."</div>
                    <div class='td'>".$row["issue"]."</div>
                    <div class='td'>".$datefuture."</div>
                    <div class='td'>".$startfuture."</div>
                    <div class='td'>".$endfuture."</div>
                    <div class='td'><form action='ticketdetails.php' method='post'>
                        <input type='hidden' name='id' value='".$row["id"]."'>
                        <input type='submit' value='Ticket Details'></form>
                    </div>
                    </div>";
                }
                echo "</div>";
            } else {
                echo "<p><b>No future appointments!</b></p>";
            }
        ?>

        <hr>
    </body>
</html>

我还清理了一些无效的标记（标签内的div等）。

如何在PHP中使用Bootstrap Grid

2 个答案: