bootstrap栅格系统各种样式测试

时间：2019-09-30 23:46:13 阅读：154 评论：0 收藏：0 [点我收藏+]

标签：一个输入 ack 内容 class tle -o container image

一、同一行内的12格中均输入内容

在前面的初始div中代码做以下修改：

<div class="container">
    <div class="row"><!-- 定义行row-->
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
    </div>
</div>

浏览器可输出如下结果

二、总共输出两列，第一列占4份，第二列占8份

代码如下：

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
</div>

浏览器输出结果如下

三、测试一行内多出12份部分会如何处理

代码：

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
</div>

结果：多出来的一份会往下掉

四、如果不够，比如第一列4份，第二列4份

代码

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>

结果，后面不足的部分会空出来

五、如果在不够的情况下，如何移动，比如第一列往后推一份，第二列往后推3份

代码

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
</div>

结果：如果推的多了就会往下掉了

六、第一列4份，第二列6份，如何实现两列交换

（1）将两列代码进行调换，但是这样不好

（2）加一个东西来实现

代码

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-6">col-md-4</div>
        <div class="col-md-6 col-md-pull-4">col-md-6</div>
    </div>
</div>

结果

七、比如第一列为9份，第二列为3份，现在如果在第一列9份下面嵌套一个两列，每列6份会怎么样

代码：

<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div>
        <div class="col-md-1">col-md-1</div><!-- 这是第13份-->
    </div>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-1">col-md-4</div>
        <div class="col-md-4 col-md-offset-3">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-6">col-md-4</div>
        <div class="col-md-6 col-md-pull-4">col-md-6</div>
    </div>
    <div class="row">
        <div class="col-md-9">col-md-9
            <div class="row">
                <div class="col-md-6">col-md-6</div>
                <div class="col-md-6">col-md-6</div>
            </div>
        </div>
        <div class="col-md-3">col-md-4</div>
    </div>
</div>

结果

八、不同设备上的配置

代码

<div class="row">
    <div class="col-sm-12 col-md-8">col-sm-12 col-md-8</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
    <div class="col-sm-6 col-md-4">col-sm-6 col-md-4</div>
</div>
<div class="row">
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
    <div class="col-sm-6 col-md-6">col-sm-6 col-md-6</div>
</div>

1、大屏上的结果为（1200px以上）

2、小屏上的结果为（768px-992px）

3、超小屏上的结果（768px以下）

九、被卡主的情况

代码：

<div class="container">
    <div class="row">
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3这个地方我给他多加点内容来进行测试</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>

结果

小屏以上

超小屏

小屏情况下，第一列的内容太多了，后面的三列就下不去，卡住了

如何解决？

<div class="container">
    <div class="row">
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3这个地方我给他多加点内容来进行测试</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="clearfix visible-xs"></div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
         <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    </div>
</div>

bootstrap栅格系统各种样式测试

标签：一个输入 ack 内容 class tle -o container image

原文地址：https://www.cnblogs.com/pere/p/11614239.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行