php - 如何在 PHP 中使用 Bootstrap Grid
问题描述
基本上,我想让这个页面具有响应性,以便仅使用引导网格(容器、行、列)在移动设备上轻松查看,而不使用引导程序的样式。尽管我尝试了很多方法,但现在它并没有这样做。我的其他没有 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 = '';
}"/>
<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>
解决方案
鉴于您所展示的内容,您至少需要移动 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 = '';
}"/>
<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 等)。
推荐阅读
- python - 使用 OpenCV 在不按任何键的情况下拍摄特定数量的图像
- ios - 这是swift中的错误还是我的代码不正确(uialertcontroller)?
- python - 在 Python 中将参数传递给 subprocess.run()
- python - xticks 中的不规则日期为 int
- maven - 如何修复maven容易出错的编译问题
- sql - 选择 7 天前的日期
- python - Kivy:如何屏蔽所有用户交互?
- r - 如何使用 Plotly 在 R 中添加趋势线
- autodesk-forge - BIM360 Docs GET 文件夹内容页数限制
- python - 在 Django 中使用 jsonb_object_keys postgres 函数?