Verzeihen Sie meinen Jargon, ich bin gerade erst in die Web-Entwicklung gekommen und habe schlechte Kommunikationsfähigkeiten.Überlaufender Text aus einer Bootstrap-Zeile verbirgt sich hinter dem Text einer anderen Zeile
Ich bin mit Bootstrap-4 Alpha und JQuery 3.
Ich habe einen Chatroom in einem Flüssigkeitsbehälter mit zwei Reihen: eine Sende-Nachricht Bar und eine recieve Nachricht Spalte (plus die Uhr Spalte und Userliste Spalte)
Hier ist mein Code:
<div class="container-fluid">
\t \t <div class="row">
\t \t \t <!-- Chat View Column -->
\t \t \t <div class="col-sm-2">
\t \t \t \t <ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <!-- Message View Column -->
\t \t \t <div class="col-sm-8" style="float: left;">
\t \t \t \t <ul class="" id="messages" style="margin: 20px;"></ul>
\t \t \t </div>
\t \t \t <!-- Connected Users Column -->
\t \t \t <div class="col-sm-2">
\t \t \t \t <ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
\t \t \t \t \t <div class="btn-group-vertical" style="width:100%">
\t \t \t \t \t </div>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
<!-- Send message bar -->
\t \t <div class="row">
\t \t \t <form action="">
\t \t \t <div class="col-lg-9 col-md-9 text-right">
\t \t \t \t <input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
\t \t \t </div>
\t \t \t <div class="col-lg-3 col-md-3 text-left">
\t \t \t \t <button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
\t \t \t </div>
\t \t \t </form>
\t \t </div>
\t </div>Wenn die „Nachricht anzeigen Colum n "füllt sich, Text verschwindet hinter der zweiten Zeile und ich kann die letzten Nachrichten nicht sehen. Wie behebe ich das?
Lassen Sie mich wissen, wenn ich
ich den Javascript-Tag Detail hinzufügen sollte hinzugefügt, weil ich Javascript nicht dagegen bin mit dem Problem
Hm, besser, aber es funktioniert nicht, wenn ich nicht das Fenster super groß habe. Wenn das Fenster kleiner ist, verbirgt es immer noch die neueste Nachricht –
hat diesen Fall nicht gesehen. Fügen Sie also 'margin-bottom: 153px;' zu css des zweiten '.row' hinzu und fügen Sie auf den Medienabfragen' min-width.row' 768px und größer 'margin-bottom: 98px' hinzu. Wenn du Javascript willst, berechne die Höhe der 2. Reihe mit '$ (". row form "). css (" height "). replace (" px "," ")' und setze auf das resize Event den 1. Wert Zeile diesen berechneten Wert. Ich empfehle und bevorzuge die css-Version – pedrofsantos
"so Rand-unten: 153px; zum css des 2. .row" hinzufügen Fehler: 1. '.row' nicht 2. (kann meinen letzten Kommentar nicht bearbeiten) – pedrofsantos