如何使用自定義的引導網格偏移選項較少

我想減少col-md-offset-1的引導通過在某一個地方分配margin-left寬度。我寧願這通過使用LESS來完成。如何使用自定義的引導網格偏移選項較少

2015-05-03 dreamer

我不明白爲什麼這個問題要關閉範圍過寬。事實上，只有一個答案使用媒體查詢（'@media（min-width：992px）'）設置您的自定義邊距。兩個可能的答案與問題本身無關。另外一個簡短的問題可能是一個很好的問題。 –

因爲解決方案與純CSS完全一樣，所以您並不需要這麼做。只需覆蓋相應的屬性：

@media (min-width: 992px) { 
    .col-md-offset-1 { 
     margin-left: 42%; /* <- your value here */ 
    } 
}

在更短的，你可以修改引導產生所有這些offset類的方法（通過重寫/級聯these mixin and variables），但是這將是你真正需要的是微小的變化矯枉過正）。

來源

2015-05-03 14:13:15

完美！只是我想要的... – dreamer

你能建議一個很好的教程跳入LESS嗎？ – dreamer

http://www.cssauthor.com/less-tutorials/ –

@七階段-MAX寫道：

你並不真正需要的，因爲解決這個不太會有完全一樣的純CSS。

我不同意這一點。 Bootstrap使用較少的代碼來幫助你編寫DRY（不要重複你自己）。當您開始對您的更改進行硬編碼時，在您更改某些框架參數時，您的更改將在未來中斷。

改變.col-md-offset-1的行爲取決於@screen-md-min變量，設置min-width對媒體查詢，請參閱：http://getbootstrap.com/css/#grid-media-queries

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... }

所以，在我看來，你更少的代碼應該看起來像下圖所示：

@import "bootstrap" 
@media (min-width: @screen-md-min) { 
    .col-md-offset-1 { 
    margin-left: 42%; /* <- your value here */ 
    } 
}

使用上面的你應該注意到你不能沒有運行autoprefixer重新編譯引導，請參閱：http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/

爲了讓您更改未來證明，您還應該考慮使您的修改僅適用於您需要的情況（並且不要更改預定義的.col-md-offset-1本身的屬性）。例如，通過使用網格的唯一父項;

HTML

<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">

少

@import "bootstrap" 
@media (min-width: @screen-md-min) { 
    #maincontent .col-md-offset-1 { 
    margin-left: 42%; /* <- your value here */ 
    } 
}

來源

2015-05-05 11:41:06

公平點。我的假設是，如果這是唯一的（或可能是幾個相同的微小變化之一）修改OP想要應用於他的主題設置一個完整的Bootstrap構建工具鏈並從頭開始編譯可能真的是一個矯枉過正一個還不熟悉這一切的人。 –

如何使用自定義的引導網格偏移選項較少

回答

相關問題