大約在自舉定義新的可見-SM-表單元3

Question

引導3帶有：

• 可見-SM-塊
• 可見-SM-直列
• 可見-SM-直列塊

我喜歡在我的CSS文件中定義visible-sm-table-cell，像這樣：

@media (min-width: 768px) and (max-width: 991px) { 
    .visible-sm-table-cell { 
     display: table-cell !important; 
    } 
} 

我可以使用Less來將這個新的CSS規則添加到Bootstrap編譯的CSS中嗎？怎麼樣？非常感謝。

@import 'custom'; 

然後指定在新建custom.less如下：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 
    .visible-sm-table-cell { 
    display: table-cell !important; 
    } 
} 

Answer 1

您可以在主bootstrap.less文件中的核心添加custom.less文件引導/less文件夾，然後將它導入並重新編譯這些文件。 PS：我只建議創建一個新的.less文件以避免修改核心文件，以便日後更輕鬆地進行更新。

Answer 2

是的，你可以。

幾乎所有Bootstrap的mixin都存儲在mixin.less中，被描述爲一個很棒的工具。您可以編輯它以添加您的custom.less文件或編輯bootstrap.less文件。我們的團隊分叉了該項目並修改了我們自己的自定義項目mixin.less。 （這只是我們的選擇）。我們說：

@import 'custom';

.less文件，可以在任何該工具包中.less文件使用一個mixin。

$ lessc ./less/bootstrap.less > myBootstrap.css

不太可能被使用，直到第2版（我不知道）。但是現在Bootstrap使用Grunt來編譯較少的文件。

正如你在variables.less中看到的，文件768是@screen-sm-min而991是@screen-sm-max。所以你的custom.less文件可能是：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 
    .visible-sm-table-cell { 
     display: table-cell !important; 
    } 
}