使用Bootstrap进行菜单定位

html
css

2017-04-14 75 views 1 likes

目前，我正在使用基于Bootstrap 3.3.7的基于Web的游戏（agar.io spinoff）。我不一定要为Bootstrap 4重新编写代码来使用网格，那么我该怎么做呢？这是我目前有：（正如你所看到的，我在这里运行的空间）使用Bootstrap进行菜单定位

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

来源

2017-04-14 Braden Lamb

图片显示为链接，不知道为什么... –

bootstrap 3使用网格系统，请看https://getbootstrap.com/examples/grid/。你需要在你的页面根目录下声明一个容器，然后如果我理解正确，可以在列中添加其他控件。作为奖励，您可以使用链接语法来移动列，以使您的游戏能够响应移动设备。 – RandomUs1r

回答

不要复制和粘贴我的代码，但是这是我会怎么做：

我会创造一个模式，父其保持.row具有三个.col和那些.col内-container，我将包括另一个.row包含.col跨越.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-->

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

但是，这会给你所需的外观，如你所呈现的图像中所描述的。

来源

2017-04-27 23:56:25

使用Bootstrap进行菜单定位

回答

相关问题