html - 使用 Bootstrap 定位菜单

Question

目前，我正在开发一款基于网络的游戏(agar.io 衍生产品)，其 UI 基于 Bootstrap 3.3.7。我不一定要为 Bootstrap 4 重新编码以使用网格，那么我该怎么做呢？ 这是我目前拥有的:(如您所见，我这里的空间用完了。)

Current

这是我计划实现的目标:(注意菜单的不同部分并排并垂直对齐)

What I plan to achieve 有人可以解决这个问题吗，我已经为此工作了几个小时，但我很困惑。我当前的 CSS(#helloDialog 是菜单上的主对话框):

#helloDialog, #scorebox, #news, #about, #myviewskin {
    width: 400px;
    background: #fff repeat scroll left top;
    /* margin: 10px auto; */
    padding: 5px 15px 5px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 1;
    border-radius: 15px;
}

Answer 1

不要复制粘贴我的代码，但我会这样做:

我会创建一个模态父容器，它包含一个 .row 和三个 .col，在那些 .col 中，我会包括另一个包含 .col 的 .row，它跨越 .row 的整个宽度，col-12，然后包含 .panel

<div class="modal">
  <div class="container">
   <div class="row">
    <div class="col-sm-3">
      <div class="row">
        <div class="col-sm-12">
          <div class="panel">
          </div><!--end panel-->
        </div><!--end col-->
      </div><!--end row-->
    </div><!--end col-->
    <!--include column here with row and column children and panel-->
    <!--include column here with row and column children and panel-->
  </div><!--end row-->
  </div><!--end container-->
</div><!--end modal-->

我说不要复制和粘贴我的代码，因为模式仍然需要其他必需的标记，您需要自己包含其余标记。

但这将为您提供所需的外观，如您提供的图片中所述。