我想使模式，看起来像一个聊天盒.我已经完成了大部分工作，但输入区域并不固定.理想情况下，我希望输入文本在页脚上，但模式页脚似乎有一个不可见的左边距或填充，我无法通过css摆脱它.我希望整个模式页脚字段都被占用.
我try 将其填充和边距设置为0，但无济于事.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="modal modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<img src="https://via.placeholder.com/50" alt="picture of angie" class="chatbox-pic img-fluid" />
<h1 class="modal-title fs-5 mx-3" id="chat-modalLabel">Angie</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="chatbox">
<p class="chat1">Hi! I really like your picture!</p>
<div class="clear"></div>
<p class="chat2">
Thanks! I love yours, btw. You look busy with work.
</p>
<div class="clear"></div>
<p class="chat1">
I do. Thank goodness THWP is for busy people like us.
</p>
<div class="clear"></div>
<p class="chat2">Loving this app. It's lovable with you in it.</p>
<div class="clear"></div>
<p class="chat1">LOL. Where you at right now? Work?</p>
<div class="clear"></div>
<p class="chat2">Yeah. I'm near Rosenberg. How about you?</p>
<div class="clear"></div>
<p class="chat1">That's just a 15-min drive from here!</p>
<div class="clear"></div>
<p class="chat2">Nice! You free today?</p>
<div class="clear"></div>
<p class="chat1">Sadly, no.</p>
<div class="clear"></div>
<p class="chat2">Bummer.</p>
<div class="clear"></div>
<p class="chat1">I'm free this Saturday. Maybe, we could...</p>
</div>
</div>
<div class="modal-footer justify-content-between">
<form>
<label for="message-text"></label>
<div class="input-group">
<input type="text" class="form-control w-100" id="message-text" aria-describedby="send-button" />
<div class="input-group-append">
<a href="#" class="btn input-group-text"><span
class="material-symbols-rounded align-middle"
id="send-button"
>send</span
></a
>
</div>
</div>
</form>
</div>
</div>
</div>