使用引導 css 將兩個 div 水平並排並排到頁面上

問題描述

請參考下面的程式碼我試過

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

輸出：

First Div
SecondDiv

預期產量：

                      First Div        Second Div

我想使用引導 css 將兩個 div 水平對齊到頁面。我該怎麼辦？我不想使用簡單的 css 和浮動概念來做到這一點。因為我需要使用引導 css 來處理所有型別的佈局 (即所有視窗大小和解析度)，而不是使用媒體查詢。

最佳解決方案

這應該是訣竅：

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

閱讀 Bootstrap 檔案的網格系統部分，以瞭解 Bootstrap 網格的工作原理：

http://getbootstrap.com/css/#grid

次佳解決方案

使用引導類 col-xx-#和 col-xx-offset-#

那麼這裡發生的是你的螢幕被分為 12 列。在 col-xx-#中，#是您覆蓋的列數，offset 是您離開的列數。

對於 xx，在通用網站中，首選 md，如果您希望在移動裝置中使用佈局，xs 是首選。

我可以根據您的要求，

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

應該做的伎倆

參考文獻

• Align two divs horizontally side by side center to the page using bootstrap css

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。