在較小屏幕上的引導程序布局

Question

我正在使用PhoneGap將網頁構建到使用Twitter Bootstrap和Flat UI創建的應用程序中。 一切似乎都正常，但我遇到一個問題。 當我在台式機或筆記本電腦上測試網頁時，布局可以很好地划分為12個部分，但是當我嘗試在手機布局的同一行上放置圖像或按鈕時，它們會垂直放置在另一個之上。

例如，如果我在一行上有兩個按鈕，則兩個按鈕都將拉伸到手機的寬度，並放在兩個單獨的行上。

    <div class="row">
        <div class="col-md-6">
            <a href=".\back.html" class="btn btn-block btn-lg btn-success">BACK</a>
        </div>
        <div class="col-md-6">
            <a href=".\next.html" class="btn btn-block btn-lg btn-inverse">NEXT</a>
        </div>
    </div>

另外，我在頂部聲明：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

是否知道為什么會這樣？

我想做的一件事是有6個編號為1-6的盒子供用戶選擇。 我想每行有2個數字並有3行。 當我嘗試以這種方式實現圖像（帶編號的框）時，它們又被拉伸了，最終變成了6行和巨大的框。

Answer 1

您正在使用.col-md-6 ，它用於中等大小的屏幕。 如果希望將它們以相同的方式放置在電話（x小型設備）上，則需要使用.col-xs-6 。

有關更多信息，您可以閱讀有關如何進行設置的引導程序文檔 。

Answer 2

在舊的bootstrap 2.3.2中，網格語法如下所示

<div class="container">
    <div class="row-fluid">
        <div class="span6">left</div>
        <div class="span6">right</div>
    </div>
</div>

當我們想要獲得響應式設計時使用class =“ row-fluid”，但是在這種情況下，所有元素（.col-md-6-在新的引導程序中或.span6在舊的引導程序中）都顯示為寬度為100％的塊元素在開發人員工具中查看舊的2.3.2引導網格，調整窗口寬度。 並在開發人員工具中查看這個新的3自舉網格 ，調整窗口寬度。 謹防並了解所有內容。