Twitter引导程序,宽度为> 1170px

时间:2013-04-29 14:21:12

标签: css twitter-bootstrap grid-layout

这可能是一个愚蠢的问题,但在环顾世界各地的网站一段时间后,我找不到答案。

我正在为我的新网站使用twitter bootstrap的流体网格系统。我嘲笑主页的容器区域比twitter的默认1170px(1506px)宽。

1506px布局细分为: 12列,每列98px(1176px),11个边距为30px(330px)

1176 + 300 = 1506.

那么有什么方法可以将这个宽度(1506)插入到twitter bootstrap中,而不必检查一堆LESS和CSS?

3 个答案:

答案 0 :(得分:5)

看起来你需要的一切都从第111行开始:

@media (min-width: 1200px) {
  ...

  .container,
  .navbar-static-top .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
  }
  .span12 {
    width: 1170px;
  }

  ...

}

答案 1 :(得分:0)

除非您放弃并更换1200px网格,否则无法在http://getbootstrap.com/customize/使用自定义程序。

编译自己的css将是最简单的方法: 请参阅:https://stackoverflow.com/a/12029786/1596547以及Twitter Bootstrap Customization Best Practices

以下示例将此网格的最小宽度设置为1536像素(1536 x 864)网格宽度+装订线

  1. 从github分叉twitter-bootstrap并在本地克隆
  2. 将您的新1536变量添加到 less / variables.less (在1200个变量之前,见下文)
  3. copy less / responsive-1200px-min.less to less / responsive-1536px-min.less “搜索并用1536替换”1200:
  4. less / resposnive.less 中导入responsive-1536px-min.less @import "responsive-1536px-min.less";(在包括1200之前)
  5. 通过Node安装LESS命令行工具并运行以下命令:$ lessc ./less/bootstrap.less > bootstrap.css
  6. 步骤2的变量。:

    // 1536px min
    @gridColumnWidth1536:     98px;
    @gridGutterWidth1536:     30px;
    @gridRowWidth1536:        (@gridColumns * @gridColumnWidth1536) + (@gridGutterWidth1536 * (@gridColumns - 1));
    
    // 1536px min
    @fluidGridColumnWidth1536:     percentage(@gridColumnWidth1536/@gridRowWidth1536);
    @fluidGridGutterWidth1536:     percentage(@gridGutterWidth1536/@gridRowWidth1536);
    

    或者不首选创建自己的1536(1506)网格css并在源代码中的bootstrap css之后添加它。

    <强> 1536.css:

       /* based on Bootstrap v2.3.2 */
    @media (min-width: 1536px) {
      .row {
        margin-left: -30px;
        *zoom: 1;
      }
      .row:before,
      .row:after {
        display: table;
        content: "";
        line-height: 0;
      }
      .row:after {
        clear: both;
      }
      [class*="span"] {
        float: left;
        min-height: 1px;
        margin-left: 30px;
      }
      .container,
      .navbar-static-top .container,
      .navbar-fixed-top .container,
      .navbar-fixed-bottom .container {
        width: 1506px;
      }
      .span12 {
        width: 1506px;
      }
      .span11 {
        width: 1378px;
      }
      .span10 {
        width: 1250px;
      }
      .span9 {
        width: 1122px;
      }
      .span8 {
        width: 994px;
      }
      .span7 {
        width: 866px;
      }
      .span6 {
        width: 738px;
      }
      .span5 {
        width: 610px;
      }
      .span4 {
        width: 482px;
      }
      .span3 {
        width: 354px;
      }
      .span2 {
        width: 226px;
      }
      .span1 {
        width: 98px;
      }
      .offset12 {
        margin-left: 1566px;
      }
      .offset11 {
        margin-left: 1438px;
      }
      .offset10 {
        margin-left: 1310px;
      }
      .offset9 {
        margin-left: 1182px;
      }
      .offset8 {
        margin-left: 1054px;
      }
      .offset7 {
        margin-left: 926px;
      }
      .offset6 {
        margin-left: 798px;
      }
      .offset5 {
        margin-left: 670px;
      }
      .offset4 {
        margin-left: 542px;
      }
      .offset3 {
        margin-left: 414px;
      }
      .offset2 {
        margin-left: 286px;
      }
      .offset1 {
        margin-left: 158px;
      }
      .row-fluid {
        width: 100%;
        *zoom: 1;
      }
      .row-fluid:before,
      .row-fluid:after {
        display: table;
        content: "";
        line-height: 0;
      }
      .row-fluid:after {
        clear: both;
      }
      .row-fluid [class*="span"] {
        display: block;
        width: 100%;
        min-height: 30px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        margin-left: 1.9920318725099602%;
        *margin-left: 1.9388403831482581%;
      }
      .row-fluid [class*="span"]:first-child {
        margin-left: 0;
      }
      .row-fluid .controls-row [class*="span"] + [class*="span"] {
        margin-left: 1.9920318725099602%;
      }
      .row-fluid .span12 {
        width: 100%;
        *width: 99.94680851063829%;
      }
      .row-fluid .span11 {
        width: 91.50066401062416%;
        *width: 91.44747252126245%;
      }
      .row-fluid .span10 {
        width: 83.00132802124833%;
        *width: 82.94813653188662%;
      }
      .row-fluid .span9 {
        width: 74.5019920318725%;
        *width: 74.4488005425108%;
      }
      .row-fluid .span8 {
        width: 66.00265604249668%;
        *width: 65.94946455313497%;
      }
      .row-fluid .span7 {
        width: 57.503320053120845%;
        *width: 57.450128563759144%;
      }
      .row-fluid .span6 {
        width: 49.00398406374502%;
        *width: 48.95079257438332%;
      }
      .row-fluid .span5 {
        width: 40.504648074369186%;
        *width: 40.451456585007485%;
      }
      .row-fluid .span4 {
        width: 32.005312084993356%;
        *width: 31.952120595631655%;
      }
      .row-fluid .span3 {
        width: 23.50597609561753%;
        *width: 23.45278460625583%;
      }
      .row-fluid .span2 {
        width: 15.006640106241699%;
        *width: 14.953448616879998%;
      }
      .row-fluid .span1 {
        width: 6.507304116865869%;
        *width: 6.454112627504167%;
      }
      .row-fluid .offset12 {
        margin-left: 103.98406374501992%;
        *margin-left: 103.8776807662965%;
      }
      .row-fluid .offset12:first-child {
        margin-left: 101.99203187250995%;
        *margin-left: 101.88564889378654%;
      }
      .row-fluid .offset11 {
        margin-left: 95.48472775564409%;
        *margin-left: 95.37834477692067%;
      }
      .row-fluid .offset11:first-child {
        margin-left: 93.49269588313412%;
        *margin-left: 93.3863129044107%;
      }
      .row-fluid .offset10 {
        margin-left: 86.98539176626825%;
        *margin-left: 86.87900878754483%;
      }
      .row-fluid .offset10:first-child {
        margin-left: 84.99335989375828%;
        *margin-left: 84.88697691503486%;
      }
      .row-fluid .offset9 {
        margin-left: 78.48605577689243%;
        *margin-left: 78.37967279816901%;
      }
      .row-fluid .offset9:first-child {
        margin-left: 76.49402390438246%;
        *margin-left: 76.38764092565904%;
      }
      .row-fluid .offset8 {
        margin-left: 69.9867197875166%;
        *margin-left: 69.88033680879319%;
      }
      .row-fluid .offset8:first-child {
        margin-left: 67.99468791500664%;
        *margin-left: 67.88830493628322%;
      }
      .row-fluid .offset7 {
        margin-left: 61.48738379814077%;
        *margin-left: 61.38100081941736%;
      }
      .row-fluid .offset7:first-child {
        margin-left: 59.49535192563081%;
        *margin-left: 59.388968946907404%;
      }
      .row-fluid .offset6 {
        margin-left: 52.98804780876495%;
        *margin-left: 52.88166483004154%;
      }
      .row-fluid .offset6:first-child {
        margin-left: 50.996015936254985%;
        *margin-left: 50.88963295753158%;
      }
      .row-fluid .offset5 {
        margin-left: 44.48871181938911%;
        *margin-left: 44.3823288406657%;
      }
      .row-fluid .offset5:first-child {
        margin-left: 42.49667994687915%;
        *margin-left: 42.390296968155745%;
      }
      .row-fluid .offset4 {
        margin-left: 35.98937583001327%;
        *margin-left: 35.88299285128988%;
      }
      .row-fluid .offset4:first-child {
        margin-left: 33.99734395750332%;
        *margin-left: 33.890960978779916%;
      }
      .row-fluid .offset3 {
        margin-left: 27.49003984063745%;
        *margin-left: 27.383656861914048%;
      }
      .row-fluid .offset3:first-child {
        margin-left: 25.49800796812749%;
        *margin-left: 25.391624989404086%;
      }
      .row-fluid .offset2 {
        margin-left: 18.99070385126162%;
        *margin-left: 18.88432087253822%;
      }
      .row-fluid .offset2:first-child {
        margin-left: 16.99867197875166%;
        *margin-left: 16.892289000028256%;
      }
      .row-fluid .offset1 {
        margin-left: 10.49136786188579%;
        *margin-left: 10.384984883162385%;
      }
      .row-fluid .offset1:first-child {
        margin-left: 8.49933598937583%;
        *margin-left: 8.392953010652427%;
      }
      input,
      textarea,
      .uneditable-input {
        margin-left: 0;
      }
      .controls-row [class*="span"] + [class*="span"] {
        margin-left: 30px;
      }
      input.span12,
      textarea.span12,
      .uneditable-input.span12 {
        width: 1492px;
      }
      input.span11,
      textarea.span11,
      .uneditable-input.span11 {
        width: 1364px;
      }
      input.span10,
      textarea.span10,
      .uneditable-input.span10 {
        width: 1236px;
      }
      input.span9,
      textarea.span9,
      .uneditable-input.span9 {
        width: 1108px;
      }
      input.span8,
      textarea.span8,
      .uneditable-input.span8 {
        width: 980px;
      }
      input.span7,
      textarea.span7,
      .uneditable-input.span7 {
        width: 852px;
      }
      input.span6,
      textarea.span6,
      .uneditable-input.span6 {
        width: 724px;
      }
      input.span5,
      textarea.span5,
      .uneditable-input.span5 {
        width: 596px;
      }
      input.span4,
      textarea.span4,
      .uneditable-input.span4 {
        width: 468px;
      }
      input.span3,
      textarea.span3,
      .uneditable-input.span3 {
        width: 340px;
      }
      input.span2,
      textarea.span2,
      .uneditable-input.span2 {
        width: 212px;
      }
      input.span1,
      textarea.span1,
      .uneditable-input.span1 {
        width: 84px;
      }
      .thumbnails {
        margin-left: -30px;
      }
      .thumbnails > li {
        margin-left: 30px;
      }
      .row-fluid .thumbnails {
        margin-left: 0;
      }
    }
    

答案 2 :(得分:-1)

您可以在此处插入自定义值:

http://twitter.github.io/bootstrap/customize.html