Question

我正在尝试自定义一个基于Bootstrap的Joomla模板。具体来说，我试图制作一个“硬编码”.span4的宽度为.span3。当然，更改标记会更容易，但我认为这就是css的用途，尽管我们大多数人都使用Bootstrap来定义布局和视觉外观。此外，学习的乐趣在哪里？

为此，我正在尝试使用模板提供的my_css.less：

.row-fluid #top1.span4 {
    .row-fluid .span(3);
    background:red;
}

实际上，“背景”位只是为了确保我没有让选择器出错。因此，我使用红色背景获取该元素，但未应用其余属性。这就是我得到的：

.row-fluid .span4 {
width: 31.623931623932%;
}

我做错了吗？我正在尝试甚至可能吗？

谢谢！

*编辑*

这是我在页面中使用的模板：

Perty by SmartAddons

我想要自定义的位是徽标右侧的那个，一个是语言选择器和社交图标。

我的客户的徽标比模板示例中的徽标宽，因此它将＃top1推向右侧，并推送下面的元素（包含“画廊”，“我的帐户”和搜索框的元素）。

回答@Harry关于选择器不匹配的问题，我的是“.row-fluid＃top1.span4”因为我只希望我的修改应用于＃top1中包含的.span4。我在下面粘贴的另一段代码是应用的而不是我想要的。此外，我希望我的自定义优先于默认的CSS，因此我的选择器尝试更具体。它似乎没有错，因为元素的背景变为红色。

@Harry：

另外，您使用任何mixins来生成宽度吗？

我在Less中没有经验，我无法在bootstrap文档中找到mixin，但@freejosh在this post表示：

在mixins.less中有一个名为.span（@columns）的mixin，它用于计算宽度，具体取决于@gridColumnWidth和@gridGutterWidth以及参数。

实际上，这个例子就是我正在努力适应我的需求。

我希望我的版本能让事情变得更清晰（或者至少不会更加模糊，英语不是我的母语）。

再次感谢你！

*编辑03/09/2014 *

好的，我想我已经开始了。新代码：

.row-fluid #top1.span4 { #grid > .fluid > .span(3); background:red; }

结果css： .row-fluid #top1.span4 { width: * 3 * 2; background: red; }

当然，浏览器会抱怨属性值无效。但至少这是一个步骤（前进？）

Answer 1

#grid > .fluid > .span(3);

给了我：

.row-fluid #top1.span4 {
  width: 23.40425532%;
  *width: 23.35106383%;
  background: red;
}

而非width: * 3 * 2;

使用less.php测试，减去v1.4，v1.7.3。请注意Less v2 do not compile BS2。

在navbar.less

中，#grid > .core > .span(@gridColumns);上的较少v2失败

使用Less覆盖类定义

1 个答案: