Мое эхо разрушает мой контейнер / строку div

Question

Итак, я хочу показать свои сообщения с переменной и отобразить html форму. Проблема в том, что мне нужно

        <div class='container'>
        <div class='row'>

потому что я хочу, чтобы он отображался в строке. Но потому что каждый пост получил те классы div, он не работает и отображает сообщения совершенно неправильно ...

Кроме того, он показывает мои кнопки "Loeschen" и "Bearbeiten" сверху, но это должно быть прямо под текстовым полем.

Как это должно выглядеть:

Как это на самом деле выглядит сейчас:

<?php   
        $ort = 'Beitr&auml;ge';
        include ("head.php");
        include("database.php");
        include("navigation.php");

?>
<!--Beitrage auflisten-->
<?php 

    $sql = "SELECT * FROM beitrag ORDER BY beitrag_id DESC";

    $res = mysqli_query($db, $sql) or die(mysqli_error());

    $beitrag = "";

    if(mysqli_num_rows($res) > 0) {
        while($row = mysqli_fetch_assoc($res)) { 
            $beitrag_id = $row['beitrag_id'];
            $titel = $row['titel'];
            $leistung = $row['leistung'];
            $bezugsort = $row['bezugsort'];
            $kosten = $row['kosten'];
            $p_text = $row['p_text'];



        $beitrag .= "  

        <div class='album py-5 bg-light'>
        <div class='container'>
        <div class='row'>
        <div class='col-md-4'>
          <div class='card mb-4 box-shadow'>
             <div class='card-header'>
                <a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
                <h4 class='my-0 font-weight-normal'>$kosten&euro;</h4 >
                </div>
                <div class='card-body'>
                    <p class='card-text'>$p_text</p>
                    <div class='d-flex justify-content-between align-items-center'>
              </div>
            </div>
          </div>
        </div>"; 


    if (isset($_SESSION["login"])){ 
                if($_SESSION["login"] == 1){
                    echo "  
                    <div class='btn-group' >
                            <a href='loeschen_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
                            <a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
                            </div>";
                    }else{
                    echo "";
                }
            }





        }
        echo $beitrag;
    } else {
        echo "Keine Beiträge vorhanden ";
    }

    ?>  

    <a href='neuer_beitrag.php' target='_blank'>Neuer Beitrag</a>

Финальная версия: Благодаря aynber и остальным, теперь он работает так, как я себе это представлял <3 </a>

Answer 1

У вас есть две проблемы: 1) вы не закрываете все теги div, и 2) вы создаете новый контейнер с шириной 4 столбца для каждой строки. Вы захотите создать новый контейнер вне цикла и закрывать / открывать только в том случае, если имеется более 3 результатов:

if(mysqli_num_rows($res) > 0) {
    $i = 0; // Create a counter to see when to start a new row
    $beitrag .= "

            <div class='album py-5 bg-light'>
            <div class='container'>
            <div class='row'>";
    while($row = mysqli_fetch_assoc($res)) {
        $beitrag_id = $row['beitrag_id'];
        $titel = $row['titel'];
        $leistung = $row['leistung'];
        $bezugsort = $row['bezugsort'];
        $kosten = $row['kosten'];
        $p_text = $row['p_text'];


        $beitrag .= "

            <div class='col-md-4'>
                <div class='card mb-4 box-shadow'>
                    <div class='card-header'>
                        <a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
                        <h4 class='my-0 font-weight-normal'>$kosten&euro;</h4 >
                    </div>
                    <div class='card-body'>
                        <p class='card-text'>$p_text</p>
                        <div class='d-flex justify-content-between align-items-center'>
                        </div>
                    </div>";

        if(isset($_SESSION["login"]) && $_SESSION["login"] == 1) {
                $beitrag .= "
                        <div class='btn-group' >
                                <a href='loeschen_beitrag.php?pid=$beitrag_id'>
                                    <button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
                                <a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
                                    <button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
                                </div>";

        }

        $beitrag .= "    </div>
            </div>";

        $i++;

        if($i % 3 == 0) { // 3 results in the div, start a new one
            $beitrag .= "
                </div>
              </div>
            </div>";
            $beitrag .= "

            <div class='album py-5 bg-light'>
            <div class='container'>
            <div class='row'>";
        }


    }

    if(($i - 1) % 3 != 0) { // It would have been closed on the last loop
        $beitrag .= "
                </div>
              </div>
            </div>";
    }

    echo $beitrag;
}

Answer 2

У вас ошибка в html, вы не закрываете ссылку кнопок.

<div class='btn-group' >
                            <a href='loeschen_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button></a>
                            <a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button></a>
                            </div>