Kelas baris CSS menjadikan elemen tertentu terkeluar daripada bingkai, manakala ia harus statik dan ditetapkan pada bahagian bawah paparan
Halaman semasa saya kelihatan seperti ini. Selepas menambah kelas baris supaya kedua-dua elemen bersebelahan antara satu sama lain, bar navigasi bawah ditolak ke tempat saya perlu menatal.
Di sini anda boleh melihat halaman lain tanpa elemen baris, di mana pautan navigasi tersangkut dengan sempurna di bahagian bawah paparan (tumbuhan dan elemen navigasi bilik tidak sepatutnya berada dalam tab peringatan (imej 1), jadi abaikan elemen ini Imej 2) Halaman ini boleh ditatal dan mengekalkan bar navigasi saya pada kedudukan yang betul, tetapi garis besar elemen tidak betul. Semua paparan kotak hijau hendaklah berada di atas satu sama lain, bersama-sama dengan butang edit dan padam. Saya cuba membetulkannya menggunakan kelas baris yang digunakan untuk Rajah 1, tetapi ini mengakibatkan isu dalam Rajah 1.
Di sini anda boleh melihat perkara yang saya mahu capai dalam tab Peringatan
Saya tertanya-tanya apa yang salah dengan kod css semasa saya yang menyebabkan ralat ini apabila terdapat elemen baris dalam html saya.
Jika anda mengetahui cara yang lebih baik untuk memaparkan item bersebelahan antara satu sama lain yang menghalang tingkah laku ini, anda juga dialu-alukan.
.row {
display: flex;
align-items: center;
border-bottom: 1px solid #bdbdbd;
font-family: 'Montserrat', sans-serif;
}
.CheckButton {
margin-left: 30px;
width: 60px;
height: 80px;
}
.ReminderDescription {
flex-grow: 1;
font-weight: bold;
margin-right: 80px;
}
Coretan kod html yang menyebabkan masalah
{% block content %}
{% for reminderInstance in Reminders %}
<div class="row">
<div class="CheckButton">
<form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
<button class="NewButton NewButton1"></button>
</form>
</div>
<div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
</div>
{% endfor %}
{% endblock %}
Jika masalahnya terletak di tempat lain, saya akan memasukkan keseluruhan halaman html bersama kod css navigasi. Peringatan HTML
<!DOCTYPE html>
<html>
<head>
<title> Reminders </title>
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/nav.css') }}">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/Collection.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="nav">
<a href="{{ url_for('collection') }}" class="nav__link">
<span class="nav__text">Collection</span>
</a>
<a href="{{ url_for('index') }}" class="nav__link">
<span class="nav__text">Home</span>
</a>
<a href="{{ url_for('reminders') }}" class="nav__link nav__link--active">
<span class="nav__text">Reminders</span>
</a>
</nav>
</body>
</html>
{% block content %}
{% for reminderInstance in Reminders %}
<div class="row">
<div class="CheckButton ">
<form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
<button class="NewButton NewButton1"></button>
</form>
</div>
<div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
</div>
{% endfor %}
{% endblock %}
Navigasi CSS
body {
margin: 0 0 55px 0;
}
.nav {
position: fixed;
bottom: 0;
width: 100%;
height: 55px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
background-color: #4ea662;
display: flex;
overflow-x: auto;
}
.nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
min-width: 50px;
overflow: hidden;
white-space: nowrap;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 15px;
color: #ffffff;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.1s ease-in-out;
}
.nav__link:hover {
background-color: #eeeeee;
}
.nav__link--active {
padding: 2px 4px;
border: none;
text-align: center;
border-radius:5px;
background-color: #468454;
color: #ffffff;
}