如何在模态页脚输入文本和2个按钮?

Question

我想在模态页脚旁边有两个按钮的输入文本，这两个按钮必须与输入文本具有相同的高度，如何正确显示它?

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-lg-between">
<div class="col-md-8">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="col-md-2 text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-2 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

添加tagwrap 2按钮，并设置d-flexjustify-content-center:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chatModal">
Launch demo modal
</button>
<!-- Modal -->
<div id="chatModal" class="modal fade" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-gradient-success">
<h5 class="modal-title" id="modal_title">Chat</h5>
</div>
<div class="modal-body">
<div class="alert alert-info" role="alert">We are working on it, please try again later</div>
<div class="mb-3">
</div>
</div>
<div class="modal-footer">
<div class="d-flex flex-row justify-content-lg-between">
<div class="col-md-8 mx-5">
<input class="form-control" id="message" type="text" name="message" maxlength="1024" placeholder="Message" required />
</div>
<div class="d-flex justify-content-lg-center">
<div class="text-right">
<button type="button" class="btn btn-primary">Send</button>
</div>
<div class="col-md-1 text-right">
<button id="btnChatClose" onclick="hideChatModal();" type="button" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>