Fatal编程技术网
  • php/
  • Php CSS/引导显示问题和错误

Php CSS/引导显示问题和错误

php css bootstrap-4

Php CSS/引导显示问题和错误,php,css,bootstrap-4,Php,Css,Bootstrap 4,好的，我为一个星球大战页面设计了一些PHP代码，这是我为一个大学课程设计的，我遇到了一些我似乎无法解决的问题。我正在使用模板，我有一个基本的设计，然后我将使用连接到MySQL来实际填充和重复图像等等 到目前为止我遇到的问题。Header：无论我做什么，我都无法将Header修复到位。页脚已修复，没有问题。上述字体也适用 卡片：我用卡片来显示图片和名字。它们都是固定大小的，我看不出有什么办法可以改变。我已经搜索过了，我看不到任何改变的方法 最后，页面上有一个错误，我一生都看不到它为什么会出现 "U

好的，我为一个星球大战页面设计了一些PHP代码，这是我为一个大学课程设计的，我遇到了一些我似乎无法解决的问题。我正在使用模板，我有一个基本的设计，然后我将使用连接到MySQL来实际填充和重复图像等等

到目前为止我遇到的问题。Header：无论我做什么，我都无法将Header修复到位。页脚已修复，没有问题。上述字体也适用

卡片：我用卡片来显示图片和名字。它们都是固定大小的，我看不出有什么办法可以改变。我已经搜索过了，我看不到任何改变的方法

最后，页面上有一个错误，我一生都看不到它为什么会出现

"Uncaught Error: Class name must be a valid object or a string in 
 C:\xampp\htdocs\SWDB\controllers\characterChoose.php:2
 Stack trace:
 #0 C:\xampp\htdocs\SWDB\index.php(6): require_once()
 #1 {main}
 thrown inC:\xampp\htdocs\SWDB\controllers\characterChoose.php
 on line 2"
代码1：主模板页main.tpl

<html>
<head>
<link href="css/heroic-features.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet'>

</head>
<body>
<header>
    <nav class="navbar navbar-light"
        <a class="navbar-brand-left">
      <img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-left" alt="">
        <a class="navbar-brand-centre">
      <img src="https://i.ibb.co/xHWc1tj/Jedi-Mind-Reader-Logo-Small.png" class="mx-auto d-block" alt="">
        <a class="navbar-brand-right">
      <img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-right" alt="">
        </a>
      </a>
    </a>
  </nav>
</div>
{block name="body"}
<p>Some Text And Stuff</p>
{/block}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

.footer {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-family: Orbitron;

}

.footer a {
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.footer a:hover {
  background: red;
  color: black;
}


</style>
</head>
<body>

<div class="footer">
  <a>© S199289 2020 Copyright</a>
  <a href="mailto:S199289@uos.ac.uk?subject=Jedi-Mind-Reader">Contact us here for any questions</a>
  <a href="http://www.starwars.com">Star Wars Website</a>
</div>
</body>
</style>
</html>
代码3：页面我正在努力工作

{extends file="layouts/main.tpl"}
{block name="body"}
<div class = "text-center">
  <div class = "css-selector"
<h1 class="custom"> Choose Your Character!</h1>
<p class="custom">Scroll through the characters below.  Once you have chosen, click on "Use The Force" to start!"
</div>
<div class="card-deck">
        <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/image_21d0b16d.jpeg?region=0%2C0%2C1280%2C871"
    alt="Luke Skywalker">
    <div class="card-body">
      <div class="card css-selector bg-dark"
      <h5 class="card-title">Luke Skywalker</h5>
  </div>
</div>
</div>
</div>
  <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-t1uk0r_874e197a.jpeg?region=0%2C0%2C666%2C900"
    alt="Boba Fett">
    <div class="card-body">
      <div class="card css-selector bg-dark">
      <h5 class="card-title">Boba Fett</h5>
    </div>
      </div>
  </div>
</div>
  <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-yyyjud_fa69f3b7.jpeg?region=0%2C0%2C1280%2C720"
    alt="Leia Organa">
    <div class="card-body">
      <div class="card css-selector bg-dark">
      <h5 class="card-title">Leia Organa</h5>
    </div>
    </div>
  </div>
</div>
</div>
{/block}
我打了一个手势。在这里，我将您的问题添加到html中，以完成网站的外观。我还更正了一些标记，并添加了引导样式表链接

代码中有一些未关闭的标记，例如在main.tpl中：

卡片：我用卡片来显示图片和名字。它们都是固定大小的，我看不出有什么办法可以改变。我已经搜索过了，我看不到任何改变的方法

根据您想要更改其大小的方式，您可以覆盖其css以满足您的需要，或者您可以从这里了解有关引导4卡大小的更多信息：

关于php的错误，您需要检查站点通知您的文件：第2行的characterChoose.php。也许你可以把那个文件贴在这里，这样人们可以帮助你。您声明类名的方式有问题

多谢各位。我花了太长时间盯着代码，以至于我失去了生存的意志。我现在什么都做了，除了那些卡片，我现在就听从你的建议

如果您可以创建一个可以运行和预览的工作代码段（例如在jsfillde），其他人会更容易提供帮助。我已经尝试过这样做，但它不允许我使用2个模板文件和1个CSS文件。但是，不管它值多少钱。 
{extends file="layouts/main.tpl"}
{block name="body"}
<div class = "text-center">
  <div class = "css-selector"
<h1 class="custom"> Choose Your Character!</h1>
<p class="custom">Scroll through the characters below.  Once you have chosen, click on "Use The Force" to start!"
</div>
<div class="card-deck">
        <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/image_21d0b16d.jpeg?region=0%2C0%2C1280%2C871"
    alt="Luke Skywalker">
    <div class="card-body">
      <div class="card css-selector bg-dark"
      <h5 class="card-title">Luke Skywalker</h5>
  </div>
</div>
</div>
</div>
  <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-t1uk0r_874e197a.jpeg?region=0%2C0%2C666%2C900"
    alt="Boba Fett">
    <div class="card-body">
      <div class="card css-selector bg-dark">
      <h5 class="card-title">Boba Fett</h5>
    </div>
      </div>
  </div>
</div>
  <div class="card">
    <div class="text-center gallery">
    <img class="card-img-top" src="https://lumiere-a.akamaihd.net/v1/images/open-uri20150608-27674-yyyjud_fa69f3b7.jpeg?region=0%2C0%2C1280%2C720"
    alt="Leia Organa">
    <div class="card-body">
      <div class="card css-selector bg-dark">
      <h5 class="card-title">Leia Organa</h5>
    </div>
    </div>
  </div>
</div>
</div>
{/block}

</head>
<body>
<header>
    <! –– Here ––>
    <nav class="navbar navbar-light"
        <a class="navbar-brand-left">
      <img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-left" alt="">
        <a class="navbar-brand-centre">
      <img src="https://i.ibb.co/xHWc1tj/Jedi-Mind-Reader-Logo-Small.png" class="mx-auto d-block" alt="">
        <a class="navbar-brand-right">
      <img src="https://i.ibb.co/7vJj2z4/logo-small.png" class="float-right" alt="">
        </a>
      </a>
    </a>
  </nav>
</div>

...
</head>
<body>

<div class="footer">
  <a>© S199289 2020 Copyright</a>
...

.navbar {
  position: fixed !important; //important to override bootstrap
  z-index:99;

}