一行 Bootstrap 的溢出文本隐藏在另一行的文本后面

Question

请原谅我的行话，我最近才开始从事网络开发，沟通能力很差。

我正在使用 bootstrap 4 alpha 和 JQuery 3。

我在一个包含两行的流体容器中有一个聊天室：一个发送消息栏和一个接收消息栏（加上下午栏和用户列表栏）

这是我的代码：

<div class="container-fluid">
  <div class="row">

   <!-- Chat View Column -->
   <div class="col-sm-2">
    <ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">

    </ul>
   </div>

   <!-- Message View Column -->
   <div class="col-sm-8" style="float: left;">

    <ul class="" id="messages" style="margin: 20px;"></ul>

   </div>
   <!-- Connected Users Column -->
   <div class="col-sm-2">
    <ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
     <div class="btn-group-vertical" style="width:100%">

     </div>
    </ul>
   </div>
  </div>

        <!-- Send message bar -->
  <div class="row">
   <form action="">
   <div class="col-lg-9 col-md-9 text-right">
    <input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
   </div>
   <div class="col-lg-3 col-md-3 text-left">
    <button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
   </div>
   </form>
  </div>
 </div>

当 "Message View Column" 填满时，第二行后面的文字消失了，我看不到最新消息。我该如何解决？

让我知道是否应该添加更多详细信息

我加了Javascript标签是因为我不反对用Javascript来解决问题

Answer 1

将 margin-bottom: 98px;（第二个 .row 的高度）添加到第一个 .row 的 css，将解决您的问题。然后你可以使用 scrollBy(0, 100) 将页面滚动到底部（以 100 为例）

一行 Bootstrap 的溢出文本隐藏在另一行的文本后面

Overflowing text from one Bootstrap row hides behind text of another row

html

javascript

css

twitter-bootstrap

bootstrap-4