65916

How to reduce gutter size to zero using Twitter Bootstrap in YII?

Question:

I am using this extension: <a href="http://www.yiiframework.com/extension/bootstrap/" rel="nofollow">Yii-Bootstrap</a>, along with this less extension: <a href="http://www.yiiframework.com/extension/less" rel="nofollow">less</a>

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, ),

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;

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

I changed:

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

To:

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

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?

Answer1:

The solution was to set responsiveCss to false:

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

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";

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.

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

Recommend

  • Media object doesn't respond to cookie containing object
  • surface(2d) fit in MATLAB with anonymous function
  • Solving Readers/Writers using java Semaphores
  • String says its not null but then later throw NullPointerException
  • How to debug using superdev mode?
  • Visual VM showing strange behavior
  • Double Array to Object Array?
  • java.lang.NoClassDefFoundError: Could not initialize class sun.nio.ch.FileChannelImpl
  • Remote debugging of a Java application launched as a Windows service
  • What is the real purpose of magic method __set_state in PHP?
  • Why are the debugger memory windows not available in VS 2015?
  • Can't get LogCat (Alcatel OneTouch Evolve)
  • $this->params returns null in cakephp model
  • Visual Studio not stopping on an exception being thrown
  • Weird session behaviour in codeigniter
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • Possible to get the line number of the currently executing sproc in SQL Server?
  • Tools for understanding HTML layout
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • matlab crashes without dump file when using fopen for file
  • Spring integration inbound-gateway Fire an event when queue is empty
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Debugging VB6 Code From Visual Studio 2010
  • How do I get HTML corresponding to current DOM tree?
  • debug library loaded with ctypes using gdb
  • Meteor helpers not available in Angular template
  • Debugging ASP.NET on a built-in web server suddenly stops
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Running a C# exe file
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • How to show dropdown in excel using jrxml (jasper api)?
  • Large data - storage and query
  • ORA-29908: missing primary invocation for ancillary operator
  • WOWZA + RTMP + HTML5 Playback?
  • bootstrap to use multiple ng-app
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Converting MP3 duration time