我正在使用 bootstrap 3 modals，我被要求做的设计是
请注意图形设计师如何放置一个与文本开头垂直对齐的按钮，而另一个与文本结尾垂直对齐的按钮。
我的代码是
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
<?php echo $question_title; ?>
</div>
<div class="row">
<?php echo $you_know; ?>
</div>
<div class="row">
<?php echo $migrant; ?>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
<?php echo $yes; ?>
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
<?php echo $no; ?>
</button>
</div>
</div>
我得到了我想要的但不是我想要的对齐方式，如果我添加一些边距，它将在另一个屏幕上中断，解决它的最佳方法是什么？
请注意，我尝试将我的所有代码作为片段插入，它比实际交易更混乱，不要使用片段作为参考，我在浏览器中的代码要好得多，不要担心我的课程，它们看起来很多，但它们都是无用的，它们只不过是对齐的失败尝试。
没有片段的那个是一样的，但更容易阅读。
$(window).on('load', function () {
$('#francepopup').modal('show');
}); .fr-title-popup-margin {
margin-top: 20px;
}
.fr-popup-title {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
text-align: center;
}
.modal-fr-btn {
border-radius: 40px;
height: 25px;
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
}
.dont {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 6px;
}
.fr-flags {
margin: 0 auto;
}
.fr-text {
margin: 0 auto 0 3px
}
@media (min-width: 992px) {
.modal-dialog {
width: 30%;
}
}
@media (max-width: 991px) {
.pr {
float: right;
}
.pl {
float: left;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div class="modal fade" id="francepopup" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
Are you or is someone
</div>
<div class="row">
you know
</div>
<div class="row">
a migrant in France?
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
Yes
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
No
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>