Bootstrap 網格推拉問題

Question

我是第一次使用 Bootstrap。 試圖學習推和拉的網格系統。

<header>
    <!-- Main component for a primary marketing message or call to action -->              

    <div class ="container">
        <div class = "row">
            <div class = "col-xs-12 col-sm-8">
                <h1>RSisdtorante con Fusion</h1>
                <p style="padding:40px;"></p>
                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
            </div >
            <div class = "col-xs-12 col-sm-4">
                <h1> hello brother</h1>

            </div>
        </div>
    </div>
</header>

它根本不會更改 html 頁面。 是否有必要包含整個代碼來查看問題？

Answer 1

從引導程序文檔中查看此示例： http : //getbootstrap.com/css/#grid-example-mixed

您使用網格類的方式，您的 div 在xs屏幕上將是全寬的，但在sm屏幕上，頂部 div 將是三分之二的寬度，第二個將是三分之一的寬度。 任何比小屏幕更大的東西都將反映這種划分。

如果您使用的是 Chrome，請打開開發人員工具並調整頁面大小，使其變小，您將看到更改。

Bootstrap 具有不同的推和拉類語法，請在此處閱讀語法： http : //getbootstrap.com/css/#grid-column-ordering