使用Bootstrap定位菜单

Question

目前，我正在开发一个基于网络的游戏（agar.io spinoff），其基于Bootstrap 3.3.7的UI。我不一定要为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之内，我会包含另一个包含.row的{​​{1}}跨越.col，.row的整个宽度，然后包含col-12 s

.panel

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

但是这会给你想象的外观，如你所呈现的图像所示。