- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
Twitter Bootstrap 很容易在其上构建。现在我遇到了一个我无法解决的问题。我使用 TB v. 2.3.2。
在我自己的 style.less
文件中,我包含了 TB:
@import "../bootstrap/less/bootstrap.less";
在原来的TB文件forms.less
中,可以找到这个LESS:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: @baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: @baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: @baseFontSize;
font-weight: normal;
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
background-color: @grayLighter;
border: 1px solid #ccc;
}
}
所以在 Bootstrap 文件的@import 之后,在我自己的样式表中,我尝试像这样更改 .add-on
的背景颜色(应该变成粉红色而不是你发现的@grayLighter在上面的代码中):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
现在,我添加的颜色(蓝色)起作用了!这不是覆盖值,因为 forms.less
中的 .add-on
没有指定任何颜色。但正如您所看到的,它确实有一个背景颜色 (@grayLighter),我想改变它!你看我已经指定这个是粉红色的,但是它不起作用。我不明白这一点。有人可以帮帮我吗?
我在我的样式表中进一步使用这些 Less,如下所示:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
正如您在下图中看到的,粉红色背景颜色不起作用。
我检查了 LESS in CSS 的输出结果,并在其中写下了我的问题。我越深入研究这个问题就越不明白,一个代码笔示例确实显示粉红色作为背景,我认为它应该如何,请参见此处的工作示例:http://codepen.io/willemsiebe/pen/kvmic .
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014:好的,现在我真的很困惑!我没有直接用我自己的 style.less 覆盖它,而是将相同的代码放在不同的 less 文件中并使用 @import 导入它,现在它可以工作了......但是 CSS 中的输出完全相同,除了事实最后提到背景颜色 PINK!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
最佳答案
Twitter Bootstrap is ment to easily build on top of it.
这只适用于 mixins,另请参阅:Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
您可以尝试使用 :extend()
psuedo 类代替 mixins(仅适用于简单类),请参阅:http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
设置 HTML 样式:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
尝试以下 Less 代码:
@import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
关于css - 覆盖 Twitter Bootstrap Less 不起作用,添加新东西确实有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24692134/
这个fn是吗: function isplainobj ( obj ) { return Object.prototype.toString.call( obj ) === "[object
我尝试创建一个我没有经验的小 bash 脚本。我尝试做类似的事情: #!/bin/bash statut="na" if [ $proc = 0 ]; then statut = "close
我想重写 HighLine 的几个方法来自定义我的控制台,目前我的代码如下所示: cmd = ask("#{@prompt_label} #{@prompt_separator} ",
鉴于下面的 HTML,我尝试使用 jQuery 来匹配所有具有类“foo”的跨度的列表项,并且该跨度应包含文本“relevant”。 Some text relevant Some more
我拥有一个 5 美元 20GB SSD Digital Ocean Droplet,它几乎用完了 Docker 镜像和容器的空间。 有没有办法购买一个卷,将其连接到服务器并安全地将所有 Docker
我有这样的表: id name number result stuff stuff stuff stuff 我只想将 class = "red" 添加到
我需要计算两点之间的距离,但不是以常规方式。我需要知道“东西距离”+“南北距离”。我想这比常规的“乌鸦飞翔”计算更简单,但我仍然不知道如何做到这一点。 我想使用 MySQL 查询来执行此操作,并且最好
#include #include #include typedef struct dict_pair { void *key; void *value; struct dict_p
为什么当我尝试通过 将 char[] word 写入控制台时会发生这种奇怪的事情 Console.WriteLine(word); 我得到了一个正确的结果,但是当我写的时候 Console.Write
一个简单的例子: class C{} class B{ @Inject C c; void doSomething(){ System.out.println(c);
我想做某事,但不确定如何描述它。我有这门课 public class Company { private List _persons; private Person GetPersonByNa
我正在尝试实现我自己的 qDebug()样式调试输出流,这基本上是我目前所拥有的: struct debug { #if defined(DEBUG) template std::os
所以我正在为我的应用程序编写一个搜索功能,代码如下: - (void) selectObject: (NSString *)notes{ [axKnotes removeAllObjects]
我想在 Rust 中匹配一种复杂的继承式东西: struct Entity { pub kind: EntityKind, } pub enum EntityKind { Player
我是 SQL 新手。这没有返回任何结果...... SELECT media.id as mediaid, media.title as mediatitle, media.description
在微型 SDCard 上写入 Android things 图像并将该卡插入 Raspberry Pi 3 Model B 并打开电源,启动时显示“Auto config Please wait”然后
这是一个常见的但是文本出现在框的右侧,不是极右但几乎是这样 h3: ................................................ .................
#include #include #include #include #include int main(int argc, string argv[]) { if(argc >
所以我试图让一些东西相互堆叠。首先,查看工作链接会有所帮助,您会看到问题所在: http://brownbox.net.au/clients/matchlessphotography/ 现在我需要使用
我想在禁用 javascript 时在我的网站顶部显示一条消息(就像在 SO 上一样),但在谷歌浏览器上不起作用 最佳答案 看起来是这样。 您可以使用 javascript 隐藏“noscript”消
我是一名优秀的程序员,十分优秀!