bootstrap 布局大屏，pc,小屏，移动屏自适应

最新推荐文章于 2024-06-07 09:33:43 发布

老胡说前端

最新推荐文章于 2024-06-07 09:33:43 发布

阅读量2.7k

点赞数 2

分类专栏： bootstrap 文章标签： bootstrap html servlet

本文链接：https://blog.csdn.net/m0_65730686/article/details/126700856

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 .col-xs- 超小屏幕手机 (<768px)

2 .col-sm- 小屏幕平板 (≥768px)

3 .col-md- 中等屏幕桌面显示器 (≥992px)

4 .col-lg- 大屏幕大桌面显示器 (≥1200px)

<style>

.thumbnail h3{

color: bisque;

}

.thumbnail{

margin: 0 auto;

max-width: 310px;

}

</style>

<body>

<!--

col-lg-3: 超大屏每列占3份，排4列。 3*4 = 12 最大12份

col-md-4：中屏每列占4份，排3列。

col-sm-6：小屏每列占6份，排2列

col-sx-12：移动最小屏每列占12份，排1列。

-->

<h3 class="text-center">Thumbnail label</h3>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

<h3 class="text-center">Thumbnail label</h3>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

<h3 class="text-center">Thumbnail label</h3>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

<h3 class="text-center">Thumbnail label</h3>

<p>

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</body>