Question

原谅我的行话，我刚刚进入网络开发并且沟通能力差。

我使用bootstrap 4 alpha和JQuery 3.

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

这是我的代码：

＆＃13;

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

＆＃13;

当＆＃34;消息视图列＆＃34;填满，文字消失在第二行后面，我无法看到最新的消息。我该如何解决？

如果我要添加更多细节，请告诉我

我添加了Javascript标记，因为我并不反对使用Javascript来解决问题

Answer 1

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

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

1 个答案: