Die CSS-Zeilenklasse bewirkt, dass bestimmte Elemente außerhalb des Rahmens verschwinden, während sie statisch und am unteren Rand der Anzeige fixiert sein sollten
Meine aktuelle Seite sieht so aus. Nachdem ich die Zeilenklasse hinzugefügt habe, sodass die beiden Elemente nebeneinander liegen, wird die untere Navigationsleiste nach unten verschoben, bis ich scrollen muss.
Hier sehen Sie eine weitere Seite ohne Zeilenelemente, bei der die Navigationslinks perfekt am unteren Rand der Anzeige eingeklebt sind (die Pflanzen- und Raumnavigationselemente sollten sich nicht im Erinnerungs-Tab befinden (Bild 1), also ignorieren Sie dieses Element, Bild 2) Die Seite ist scrollbar und hält meine Navigationsleiste an der richtigen Position, aber der Umriss des Elements ist falsch. Alle Green-Box-Anzeigen sollten übereinander liegen, zusammen mit den Schaltflächen zum Bearbeiten und Löschen. Ich habe versucht, das Problem mit der für Abbildung 1 verwendeten Zeilenklasse zu beheben, aber das führte zu dem Problem in Abbildung 1.
Hier können Sie im Reiter „Erinnerungen“ sehen, was ich erreichen möchte
Ich frage mich, was mit meinem aktuellen CSS-Code nicht stimmt, der diesen Fehler verursacht, wenn mein HTML ein Zeilenelement enthält.
Wenn Sie eine bessere Möglichkeit kennen, Elemente nebeneinander anzuzeigen, die dieses Verhalten verhindert, sind Sie ebenfalls willkommen.
.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;
}
Der HTML-Codeausschnitt, der das Problem verursacht
{% 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 %}
Wenn das Problem woanders liegt, füge ich die gesamte HTML-Seite zusammen mit dem Navigations-CSS-Code ein. Erinnerungs-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 %}
Navigations-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;
}