Question

所以这是我的bootstrap 4 HTML代码，我不记得我做了什么。但我显然搞砸了一些东西，因为当我去查看它时，页面上的所有内容都要大得多，而且文件上传太大而且设法离开了卡片。任何人都可以解释原因吗？

<?php
include ("db.php");
session_start();

$user = $_SESSION["user"];


if (isset($_POST["submit"])) {
$target_dir = "pics/";
$target_file = $target_dir . basename($_FILES["img"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));



//check if there was an error
if ($uploadOk == 0) {
    echo "The file couldnt be upload, please try again";
} else {
    if (move_uploaded_file($_FILES["img"]["tmp_name"], $target_file)) {
        echo "The file has been uploaded";
    } else {

    echo "Sorry there was a error";
    }
}

    $img = $_FILES['img']['name'];

    $title = $_POST["cardname"];
    $info = $_POST["description"];
    $insta = $_POST["insta"];
    $snap = $_POST["snap"];
    $code = $_POST["code"];
    $bg = $_POST["bg"];
    $discord = $_POST["discord"];

    $sql = "SELECT * FROM cards WHERE code = '".$code."'";

    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        echo "Please pick a new id, that one is already taken";
    } else {


        $sql = "INSERT INTO cards (title, user, link, code, image, description, likes, snap, insta, yt, bg, discord)
        VALUES ('$title', '$user', '$link', '$code', '$img', '$info', '0', '$snap', '$insta', '$user', '$bg', '$discord')";

        if ($conn->query($sql) === TRUE) {
            echo "New card created!";
        } else {
            echo "There was an error";
        }
    }
}



?>


<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="main.css">
    <title>Personal cards for your social media or business | SocialCard</title>
    </head>
    <body>
        <style>
            .white {
                color: white !important;
            }
        </style>
    <div class="jumbotron">
        <div class="container text-center">
            <h1 class="big">Cards<br>
            <?php 

            $sql3 = "SELECT * FROM cards WHERE user='$user'";
            $result3  = $conn->query($sql3);

            if ($result3->num_rows > 0 ) {
                //Show user's cards
                while ($row = $result3->fetch_assoc()) {
                    ?>
                    <div class="container">
                    <div class="row">
                        <div class="col-sm-4">

                    <div class="card">
                        <div class="card-body">
                            <div class="card-img-top">
                               <?php echo "<img  alt='' class='card-img-top' src='pics/".$row['image']."'; >"; ?>
                               <form action="" method="post" enctype="multipart/form-data">

                            </div>
                           <h4>Change Profile:</h4>
                           <input type="file" name="upimg">
                           <button type="submit" name="submit1" class="btn btn-lg btn-success">Save Changes</button>
                           </form>
                        </div>
                    </div>
                    </div>
                    </div>
                    </div>
            <?php
                }
            }


            ?>

            <?php echo $_SESSION["user"]; ?>
<hr>
<div class="card">
    <div class="card-body text-center">
        <h4>Card Name:</h4>
        <form action="" enctype="multipart/form-data" method="post">
        <br>
        <input type="text" name="cardname">
        <br>
        <br>
        <h4>Profile Image:</h4>
        <input type="file" name="img">
        <br>
        <br>
        <h4>Short info:</h4>
        <input type="text" name="description">
        <br>
        <br>
        <h4>Instagram link:</h4>
        <br>

        <input type="text" name="insta">
        <br>
        <br>
        <h4>Snapchat link:</h4>
        <br>
        <input type="text" name="snap">
        <br>
        <br>
        <h4>Discord Tag:</h4>
        <br>
        <input type="text" name="discord">
        <br>
        <br>
        <h4>Background Color:</h4>
        <br>
        <input type="text" name="bg" placeholder="#hexcode">
        <br>
        <br>
        <h4>Unique Id:</h4>
        <br>
        <input type="text" placeholder="Create One :), remember it" name="code" required>
        <br>
        <br>
        <button type="submit" name="submit" class="btn btn-lg btn-primary">Create Card</button>
        <p>To get to your card go to: social-card.pw/view.php?code=youruniqueid</p>
        </form>
    </div>
</div>
</div>
        </div>
    </div>
    <div class="container">
        <div class="card bg-dark">
            <div class="card-content white">
                <h1 class="text-center font1">Purchase Premium</h1>
                <p class="text-center">Nothing here yet</p>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=cards&pub=317577&format=300x250&ga=g"></script>
<noscript><a href="https://yllix.com/publishers/317577" target="_blank"><img src="//ylx-aff.advertica-cdn.com/pub/300x250.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>

            </div>

        </div>
    </div>
    </body>    
</html>

Answer 1

大字体的原因是你忘了在顶部关闭H1标签。

<div class="jumbotron">
        <div class="container text-center">
            <h1 class="big">Cards<br>

您已关闭H1标记。

<h1 class="big">Cards<h1>

Answer 2

我还要注意您要查看文档：{{3}}

对于每个输入，您应该在名为form-group的div中具有该输入。每个输入都应该有标签。这样你就不需要拥有这些br标签，而且它更具语义性。我认为解决这个问题对你的输入大小也有帮助。

为什么我的所有bootstrap 4表单输入变得非常大？

2 个答案: