Bootstrap模态分段

Question

我需要帮助设置我的bootstrap模式以显示如下内容： 这是Facebook试图让它看起来很相似。

我已经设置了视频，但很难设法让评论部分在正确的位置。我的按钮位于底部。这是我的代码。它不会完全按照我的需要去做。尝试了数以百计的差异方式。或者，我是愚蠢的或者还没有找到正确的方法。我也尝试使用col-*-*。

<div id="videoModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Challenge Video</h4>
      </div>
      <div class="modal-body" >
        <video id="compVideo" class="video-js vjs-default-skin" controls preload="auto" data-setup="{}" height="200" width="300"><source src="test1.mp4" type="video/mp4"></video>
        <button class="btn btn-lg btn-danger"><i class="fa fa-bomb"></i></button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

我没有看到包含注释的div，但如果您希望注释在x轴上与视频对齐，则可以将其包含在具有CSS规则div的{​​{1}}中。 1}}适用于它。或者，您可以将CSS规则display: flexbox添加到注释div。 jsfiddle

Answer 2

你可以尝试这样的事情

<强> CSS

searchParam = "((Feild1:\"KeyWord\"^100)  OR (Feild2:\"KeyWord\"^50))";
QueryStringQueryBuilder query = QueryBuilders.queryString(searchParam)
    .defaultOperator(Operator.AND);
ScriptScoreFunctionBuilder scoreFunction = ScoreFunctionBuilders
    .scriptFunction("_score * doc['calc_feild'].value");
searchBulider.setQuery(new FunctionScoreQueryBuilder(query, scoreFunction)
    .boostMode("replace"));

<强> HTML

.modal-body
{
  display:table;
}
video,.comments
{
  display:table-cell;
  vertical-align:middle;
}