Question

我第一次使用boostrap。试图学习推拉的网格系统。

<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

从bootstrap文档中查看此示例：http://getbootstrap.com/css/#grid-example-mixed

您使用网格类的方式，您的div在xs屏幕上将是全宽，但在sm屏幕上，顶部div将是宽度的三分之二，第二个将是三分之一宽度。任何大于小屏幕的东西都会反映出这个部门。

如果您使用的是Chrome，请打开开发者工具并调整页面大小，使其缩小，您将看到更改。

Bootstrap有一个不同的push和pull类语法，请在此处阅读语法：http://getbootstrap.com/css/#grid-column-ordering

boostrap网格无法正常工作

1 个答案: