如何在 YII 中使用 Twitter Bootstrap 将装订线大小减少到零? [英] How to reduce gutter size to zero using Twitter Bootstrap in YII?

问题描述

我正在使用这个扩展:Yii-Bootstrap，以及这个较少的扩展:less

I am using this extension: Yii-Bootstrap, along with this less extension: less

在我的 main.php 配置文件中，我有:

In my main.php config file I have:

'components'=>array(
  'less'=>array(
    'class'=>'ext.less.components.LessCompiler',
    'forceCompile'=>true, // indicates whether to force compiling
    //'compress'=>false, // indicates whether to compress compiled CSS
    //'debug'=>false, // indicates whether to enable compiler debugging mode
    'paths'=>array(
      'less/style.less'=>'css/style.css',
    ),
  ),
  'bootstrap'=>array(
      'class'=>'ext.bootstrap.components.Bootstrap',
      'responsiveCss'=>true,
  ),

自举的好处是有效的.我的问题是我试图修改 protected\extensions\bootstrap\lib\bootstrap\less\variables.less 中的变量:

The bootstrappy goodness works. My problem is that I'm trying to modify the variables in protected\extensions\bootstrap\lib\bootstrap\less\variables.less:

@gridGutterWidth:         0px;
@gridGutterWidth1200:     0px;
@gridGutterWidth768:      0px;

然而，即使我直接编辑 variables.less，这些更改也不会反映在网站的任何地方.这让我相信它不是变量.我必须编辑.

However, these changes don't reflect anywhere on the site, even though I'm editing variables.less directly. This leads me to believe that it's not variables.less that I must edit.

知道如何改变排水沟吗?

Any idea how I can change the gutters?

更新:我能够编辑以下文件并查看更改:

UPDATE: I was able to edit the following file and see changes:

protected\extensions\bootstrap\assets\css\bootstrap-responsive.css

我改变了:

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 30px;
}

致:

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 0px;
}

这现在带走了排水沟.但并不能完全解决我的问题.我希望这一切都通过 YII 和 LESS 动态发生.我该怎么做?

This now takes away the gutters. But doesn't quite solve my problem. I wanted this to all happen dynamically via YII and LESS. How do I do that?

推荐答案

解决方案是将responsiveCss设置为false:

The solution was to set responsiveCss to false:

'bootstrap'=>array(
  'class'=>'ext.bootstrap.components.Bootstrap',
  'responsiveCss'=> false,
),

然后将我的 style.less 文件更改为包含:

And then to change my style.less file to include:

// Import the Bootstrap mixins, operations and functions so that you can use them in this file.
@import "../protected/extensions/bootstrap/lib/bootstrap/less/mixins.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/variables.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/scaffolding.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/responsive.less";

混淆来自responsiveCss"，它没有明确解释(任何地方).基本上，这将从 protected\extensions\bootstrap\assets\css\ 复制 css 文件并将其包含到您的文件中，无需修改.我在上面提到的是如何从标准"版本转向这种可定制"的方式.

The confusion came in with "responsiveCss", which wasn't clearly explained (anywhere). Basically this will copy the css files from protected\extensions\bootstrap\assets\css\ and include it into your file, with no modifications. What I mention above, is how you would move from the "standard" version, to this "customizable" way.

希望对大家有所帮助，因为浪费了我很多时间，更不用说我现在不得不花时间重做css了.

Hope that helps someone, because it wasted a lot of my time, not to mention the time I have to spend redoing css now.

这篇关于如何在 YII 中使用 Twitter Bootstrap 将装订线大小减少到零?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！