使用Bootstrap進行菜單定位

目前，我正在使用基於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進行菜單定位

回答

相關問題