1つのブートストラップ行からオーバーフローしたテキストが別の行のテキストの後ろに隠れます

Question

私の専門用語を教えてください。私は最近、ウェブ開発に携わり、コミュニケーション能力がありません。

私は、ブートストラップ4アルファとjQueryを使用しています3.

私は2つの行の1つの液容器内のチャットルームがあります。送信メッセージバーやレシーブのメッセージ欄（プラス午後列とユーザリストの列を）ここで

は私のコードです：

<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>

「メッセージを表示Colum n "がいっぱいになると、2行目のテキストの後ろにテキストが消え、最新のメッセージは表示されません。これをどうやって解決するのですか？

は私が

Answer 1

はにmargin-bottom: 98px;（第二.rowの高さ）を追加し、問題を解決するためにJavascriptを使用するのではなくていないよので、私はJavascriptタグを追加しました私は、より詳細に

を追加する必要があるなら、私を知ってみましょう最初の.rowのCSSは、あなたの問題を解決するでしょう。次に、scrollBy(0, 100)を使用してページを下にスクロールすることができます（例として100を使用）