Html 引导：如何垂直对齐标题开头和结尾的两个按钮？

我正在使用Bootstrap3模式，我被要求做的设计是

请注意，图形设计师如何将一个按钮与文本的开头垂直对齐，另一个按钮与文本的结尾垂直对齐

我的代码是

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

.fr标题弹出边距{
边缘顶部：20px；
}
.fr弹出式标题{
字体大小：24px；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#008cc0；
字号：800；
文本对齐：居中；
}
.模态fr btn{
边界半径：40px；
高度：25px；
宽度：80px；
字体大小：14px；
字体系列：“蒙特塞拉特”，无衬线；
颜色：白色；
字号：800；
}
1.不要{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
字体大小：6px；
}
.fr标志{
保证金：0自动；
}
.fr文本{
保证金：0自动0 3px
}
@介质（最小宽度：992px）{
.模态对话框{
宽度：30%；
}
}
@介质（最大宽度：991px）{
.公共关系{
浮动：对；
}
.pl{
浮动：左；
}
}

&时代；
是你还是某人
你知道的
法国的移民？
对
不

我只是编辑了你的代码，我希望这是你真正需要的：）

$（窗口）.on（'load'，函数（）{
$（'francepopup'）.modal（'show'）；
});
.fr标题弹出边距{
边缘顶部：20px；
}
.fr弹出式标题{
字体大小：23px；
字体系列：“蒙特塞拉特”，无衬线；
颜色：#008cc0；
字号：800；
/*文本对齐：居中*/
}
.模态fr btn{
边界半径：40px！重要；
/*高度：25px*/
宽度：80px；
字体大小：14px；
字体系列：“蒙特塞拉特”，无衬线；
颜色：白色；
字号：800；
}
1.不要{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
字体大小：6px；
}
.fr标志{
保证金：0自动；
}
.fr文本{
保证金：0自动0 3px
}
@介质（最小宽度：992px）{
.模态对话框{
宽度：30%；
}
}
@介质（最大宽度：991px）{
.公共关系{
浮动：对；
}
.pl{
浮动：左；
}
}

&时代；
是你还是某人

你知道

法国的移民？
对
不


（请不要再问我这个问题了）
请添加您的css（boostrap除外）-这是本问题的主要关注点。考虑一下做一个小片段。“RachelGallen做了这件事，但是不要用代码片段作为参考，它比我的代码在真实浏览器中看起来更凌乱，我只缺很少的空白。你曾经使用过吗？@杰伊故意不，这意味着我从来没有碰到过一个问题，并说“Frasbox是实现它的唯一途径”。因为在我看来，flexbox只是另一个工具，我不知道它是否响应良好，至少bootstrap是。你的意思是flexbox的问题很容易解决？这不是唯一的方法，但它反应灵敏，我发现它更容易控制布局。它可以在稍小的屏幕上工作，但不是22英寸（我的屏幕），看起来像这样，我已经为桌面大小做了，但你可以在上面添加一些媒体查询，以适应较小的屏幕大小