我试图移至新的boostrap 3网格,但遇到了一些困难。

  • 如何使网格堆叠在480px以下但不在480px和768px之间?
  • 在768px以上,第一个左边的填充和最后一个右边的填充在容器外部,但是在768px以下,填充在容器内部,因此外观有所不同,因为内容不再与上面的容器对齐。
  • 当网格堆栈保留填充时,但对我来说应该为0。

  • 我将在Bootstrap 3 RC1中使用以下代码,欢迎任何帮助
        <div class="container" style="background-color: purple;">
    container
    
    </div>
    
    <div class="container">
        <div class="row">
            <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
            <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
            <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        </div>
    </div>
    

    最佳答案

    2014年1月更新

    另请参阅:https://github.com/twbs/bootstrap/issues/10203

    更新2013年8月21日
    从Twitter Bootstrap 3 RC2开始,以下提到的col- *已重命名为xs-col- *
    现在有四个网格类:xs-col-*(移动,从不堆栈),col-sm-*(平板电脑,小于768px的堆栈),col-md-*(笔记本计算机,小于992 px的堆栈)和col-lg- *(桌面,堆栈低于1200px)。

    更新
    在我以前的回答中,我使用最近文档中的这张表:

    [删除旧图片]

    当我测试此值时,如果发现不同:

  • “col-xs- *”将始终应用(从不堆栈)
  • “col-sm- *”将在768和更高(992px)(以767堆叠)之间应用
  • “col-lg- *”将在992和更高版本(991处的堆栈)之间应用

    在variables.less中,您会发现:
    // Media queries breakpoints
    // --------------------------------------------------
    
    // Tiny screen / phone
    @screen-tiny:                480px;
    @screen-phone:               @screen-tiny;
    
    // Small screen / tablet
    @screen-small:               768px;
    @screen-tablet:              @screen-small;
    
    // Medium screen / desktop
    @screen-medium:              992px;
    @screen-desktop:             @screen-medium;
    

    但是似乎在480px处没有断点(或者像@fred_所说的那样,网格缺少col-ts-*(从小到小)的一组类)。另请参阅:https://github.com/twbs/bootstrap/issues/9746

    要将堆栈点设置为480px,您必须重新编译css。将@ screen-small设置为480px;并使用以下命令定义您的列:
    之后是<div style="background-color: red" class="col-sm-4">
    请注意,这将更改@ grid-float-breakpoint,也将其定义为@grid-float-breakpoint: @screen-tablet;

    当向容器添加一行时,我发现填充没有问题。

    或尝试:http://www.bootply.com/70212通过添加媒体查询将其堆叠到480px以下(JavaScript仅用于说明)

    上一个答案

    从现在开始,Twitter的Bootstrap定义了三个网格:电话的微小网格( 768px)。这些网格的行类前缀为“.col-”,“。col-sm-”和“.col-lg-”。中型网格将堆叠到768像素以下的屏幕宽度。低于480像素的小网格也不会堆叠。

    使用“col-4”前缀,网格将永远不会堆叠。因此,删除“col-4”以使您的网格堆叠在480px以下。这也将消除填充原因,因为现在是堆栈。

    另请参阅:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/Writing Twitter's Bootstrap with upgrading to v3 in mind

  • 07-24 09:44
    查看更多